Color Contrast Accessibility
WCAG (Web Content Accessibility Guidelines) state that 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 the legibility of text, whereas hue and saturation have minimal impact on legibility.
Larger text can be easier to read at a lower contrast. Therefore, WCAG requirements for bolder or wider text are 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.
- 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
To compare the colors, you do not need to know the hex code of the color you are using, the tools mentioned 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
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 is on one side, and the article is on the other. This will make it easier to select the colors you are testing.
