Ensure sufficient contrast between foreground and background colors | |
WAI / WCAG 1.0 Priority 2 checkpoint 2.2 | |
Issue Description The page contains images, objects or applets. There might be cases where the contrast between foreground and background colors is not sufficient to differentiate them. |
|
How to check
Check that colors and colored items in the page can be clearly
differentiated in all the possible contexts in which website visitors may be
using the page.
If color is used, consider exaggerating the differences between foreground and background colors by making colors differ in all the following three parameters:
Easy ways to test the page are:
|
|
Issue Explanation There are many situations where a poor choice of color hinders perception and comprehension of some information item or image in a page. This may depend on many factors including:
From the W3C guidelines:
Guideline 2. Don't rely on color alone.
If color alone is used to convey information, people who cannot differentiate between certain colors and users with devices that have non-color or non-visual displays will not receive the information. When foreground and background colors are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of color deficits. |