Color contrasts play an important role in the first impression of your website or web application. Color contrasts are also important for web accessibility. Using high contrasts between background and text will help the visually disabled, color blind, and even people with dyslexia to read your content more easily.
In Chapter 4, Leveraging the Less Built-in Functions, you can find some examples that use the built-in contrast()
function of Less. This contrast()
function returns a light (white by default) or dark (black by default) color depending on the input color. The contrast
function can help you to write a dynamical Less code that always outputs the CSS styles that create enough contrast between the background and text colors. Setting your text color to white or black depending on the background color enables you to meet the highest accessibility guidelines for every color. A sample can be found at http://www.msfw.com/accessibility/tools/contrastratiocalculator...