Suggested Tools
- Colour Contrast Analyser [https://www.tpgi.com/color-contrast-checker/]
- WebAIM Contrast Checker [https://webaim.org/resources/contrastchecker/]
Key Concepts
- Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
- Sufficient contrast between background and foreground colors makes text more readable across a broader spectrum of functional vision.
Check Color Contrast
For background/foreground color contrast, perform one or both of the following:
- Option 1: Open the Colour Contrast Analyser
- Use the Background eyedropper to select the background color OR enter the background color in the Background field.
- Use the Foreground eyedropper to select the Foreground color OR enter the Foreground color in the Foreground field.
- Note whether the colors have sufficient contrast to meet the guideline.
- Option 2: Open the WebAIM Contrast Checker
- Use the Background eyedropper to select the background color OR enter the background color in the Background field.
- Use the Foreground eyedropper to select the Foreground color OR enter the Foreground color in the Foreground field.
- Note whether the colors have sufficient contrast to meet the guideline.
Color Resources
OCR Video Series, Topic 13: Use of Color Alone to Convey Information