Color plays a key role when it comes to Accessibility.
Though if your site has good content, if it is not accessible or readable to the users who are colorblind – then what is the use of such site, that means you are actually ignoring 4.5% to 8% of population.
4.5% to 8% is a huge user base, for example just consider Britain where there are approximately 2.7 million color blind people and most of whom are male. So think how many people are there in this world with colour (color) blindness (colour vision deficiency, or CVD).
If you are not making your App accessible friendly by using proper colors and contrast that means you are actually not considering or giving importance to the millions of people who are colorblind. Most of the designers job is to consider appropriate colors by keeping proper accessibility in mind. And this doesn’t mean that you should use color alone to convey different kind of information.
I came across couple of interesting tools or sites which helps you to pick the right color codes by considering WCAG accessibility guidelines. The following tools even perform Color contrast testing and helps you to make your site or app more accessible friendly.
- Colorable is a color contrast tester, which tests combination of foreground and background color contrast for better readability. Just input the color you have decided to use in your App, this tool helps you to choose the right contrast values for every possible combination and even provides you pass/fail scores for the colors you choose.
- Colors is an another color palette tool, which helps you for preparing/skinning your prototypes. This tool provides a set of skin classes which can be used while prototyping in the browser. Also you could check around 90+ examples of A11Y compliant color combos.
- Color Contrast Checker is a tool helps you to check the contrast ratio.
- Colour Contrast Check is an another tool to tst colour contrast which allows one to choose foreground and a background color based on which it provides whether the colors are WCAG 2 AA Compliant (18pt+), WCAG 2 AAA Compliant (18pt+) or not.
- IDI Web Accessibility Checker is This tool checks the HTML page to test the accessibility standards to ensure the content is accessed by everyone.
To understand and to know the importance of color in accessibility, refer to the following Colour Accessibility pocket guide by By Geri Coady, which helps you to create accessible friendly designs that are accessible to people with color blindness.
Hope this is very help for designers and developers to understand the importance of Color & Contrast in Accessibility. Why not share your opinion about the same?
