Color Contrast Methods
Methods
Color Contrast with Images Disabled - Coming Soon
Color Contrast of alt Text - Coming Soon
Testing Strategy
When testing for color contrast on a website, there are generally three cases you will have. For the sake of clarity "known" means that the color code is available in the computed CSS of the page.
Both text and background color codes are known
Text color code is known, but background color is unknown. This can happen in a few cases:
Text is presented over a background image
Text has been moved with CSS and there is no programmatic way of knowing what color is behind the text
Both text and background color codes are unknown.
Images that contain text are the most common occurrence for this case.
Text and Background Color Codes Known
If both text and background color codes are known, then automated tools which check for color contrast will produce a reliable list of issues. If checking manually, you can use the Colour Contrast Analyser - color codes method to create a list of issues.
For all other cases, automated tools don't currently produce a reliable list of color contrast issues.
Either Text or Background Color Codes Unknown
If either the text or background color codes are unknown, then do the following:
Use the Color Contrast Analyzer - semi-automated method to identify areas of poor or borderline contrast.
Verify the areas of poor or borderline contrast using the Colour Contrast Analyser - color picker method.
What is color contrast?
Users with moderately low vision must be able to read text on the site without need of contrast-enhancing assistive technology.
This is accomplished by meeting a minimum contrast ratio between foreground text and the background color behind it.
Contrast ratio is usually presented in a few ways. For example, here are three ways of communicating the same contrast ratio:
4.5 to 1
4.5:1
4.5
The minimum contrast ratio for most text will be 4.5 to 1. When developing for mobile platforms, strive to meet a 7:1 ratio.
When to test for color contrast?
A good rule of thumb to follow is to test the color contrast of any text that might be read by a human.
Headings
Paragraphs
Navigation
Image alt text when image isn't displayed
Individual letters or numbers used in icons (i.e. notifications, tooltips)
Placeholder text in form fields
States (hover, active, visited, etc.) for buttons, links, etc.
Exceptions
Logo text
Incidental text
Disabled elements
Note: Inactive elements are not considered to be disabled, so text on them must meet contrast minimums. Yes, we know the word "inactive" is used in WCAG.
Guidelines
Last updated