Why and What is Color Contrast in Web!

As per the Web Content Accessibility Guidelines (WCAG) 2.0 there are a set of guidelines using which we can make our website more accessible to wide community of specially disabled people with blindness, low vision, deafness, hearing loss, speech disability. You can see more about WCAG here!. Here I am going to discuss about a single element which is Color Contrast.

What is Color Contrast?

Color contrast has a major role in web sites. When we are designing a website we have to think about the accessibility, readability and also contrast ratio for better visibility. People with eye disabilities can’t read our website when we  keep the contrast ratio as minimal. When we are using darker background we need to use the lighter color for the text and vice versa. There are two levels for the color contrast there.

  1. AA
  2. AAA

Level AA requires contrast ration 4.5:1 for normal text and 3:1 for large text. Level AAA requires contrast-ratio of 7:1 for normal text and 4.5:1 for large.

We have several tools to check the color contrast. Keep in mind that the tools are not considering drop shadow colors while checking the color contrast. I will introduce some of the tools here.

WebAim Color Contrast Checker

WebAIM

WebAIM

We can see very well detailed information about the accessibility in their website. We can access the Color Contrast Checker here or they have a website to check the color contrast of our website directly by entering our url wave.webaim.org or they provide plugins for browsers also. Simply we can give our background and foreground colors in their website and can see the result, whether it passes or fails, and what is the color ratio there. We can change the color to darker and lighter there to make an understanding about how much we need to change our colors to pass the contrast test.

WebAIM

WebAIM

Colour Contrast Check

Colour Contrast Checker

Colour Contrast Check tool provides a tool with which we can simply provide our foreground and background color, which provides a detailed information about the color and contrast. We can get the Brightness Difference, Colour Difference, Contrast Ratio, AA and AAA information at single screen. We can even change the color with simply dragging the value.

Contrast-Ratio

Contrast-Ratio

Contrast Ratio is a very fine and modern tool by Lea Verou to test the combination of colors. We can give our background and foreground color and will see the contrast result. We can quickly know that our colors pass WCAG 2.0 rules, which supports semi-transparent color, color keywords,HSL(A).The UI is very much impressive. We can also share the url to test to our clients, Managers, colleagues etc.,

Enjoy with contrast in your creativity!!! Thanks!