When checking Screensteps articles for accessibility, you will need to perform some manual checks on contrast. Automatic accessibility checkers like WAVE (Web Accessibility Evaluation Tool) may miss some contrast issues. For example, if you want to use shapes to highlight an important part of a screenshot, you will need to make sure there is sufficient contrast between the shape and the background. Using a bright yellow circle may not be contrasting enough on a white background.
Color Contrast Checkers
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.
Tips
Avoid using text and background color options unless absolutely necessary. If you need to change the color of the text or background, make sure it passes WCAG standards.