This purpose of this article is to explain why color contrast is necessary to consider when creating documents or web content as well as offer recommendations for color contrast checking tools.
Color Contrast Accessibility
WCAG (Web Content Accessibility Guidelines) state, when creating documents or web content, you should make sure to provide enough contrast between text and its background so that it can be read by people with moderately low vision and color vision deficiency (who do not use contrast-enhancing assistive technology).
Brightness and contrast have the most effect on legibility of text whereas hue and saturation have minimal effect on legibility.
Text that is larger can be easier to read at lower contrast. Therefore, WCAG requirements for bolder or wider text is lower. For example, text used for titles can use a wider range of colors, as long as it is still compliant with WCAG standards.
Text that is used for decoration or design is not included in contrast standards.
Contrast Checking Tools
The following is a list of contrast checkers available for you to use. The tools compare the hex code of a foreground and background color and analyze the contrast of the two colors using WCAG 2.1 (Web Content Accessibility Guidelines) standards.
Luckily, you don't need to know the hex code of the color you are using, the following tools all have a color picker (eye dropper) tool. When using the eye dropper, you may not be able to switch between tabs or windows to select the color you need. You may want to have both windows side by side on the screen when using the eye dropper (example below).
- A11y Color Contrast Accessibility Validator: Simple contrast checker that uses eye dropper tool and provides samples.
- WebAIM Contrast Checker: Simple contrast checker that uses eye dropper tool provides samples.
- Accessible Web Color Contrast Checker: Contrast checker that uses eye dropper tool provides samples (also available as a browser extension).
- Colour Contrast Checker: Contrast checker that show full page examples of background and foreground contrast. No eye dropper available (also available as a browser extension).
- Color Contrast Analyzer (CCA) [desktop application]: You can use this desktop application so you do not have to use multiple web browser windows.
Contrast Testing Example
The following image is an example of how to use an eye dropper tool. Set your browser windows side by side. The color contrast tool on one side, and the article on the other. This will make it easier to select the colors you are testing.
