Color
For users with colorblindness or color deficiency, it is important that color-coded information be available with another visual cue such as changes in shape, line texture, or a text label.
Sufficient contrast between foreground (text or graphics) and the background is also required. Maximum contrast is black versus white, but this combination can be considered too overwhelming (it might cause glare).
Use of Color
Don’t use presentation that relies solely on color.
Your users with visual impairment need help when you use color on your website. As many as 1 in 12 men have some degree of color blindness. That means that somewhere around 8% of your male users will struggle with your website if you don’t use color correctly.
Minimum Contrast
Contrast ratio between your text and background is at least 4.5:1
All of your users will benefit from a good contrast between the text on your website and the background color. Some of your users with visual impairments need a stronger contrast than others, so getting your colors right is essential.
What To Do
Using color is mainly a case of using your common sense:
Instructions must not rely on color alone.
Other information (like charts and graphs) must not rely on color alone.
Using a color and contrast checker to to verify your color/contrast choice.
Exceptions
Text that is 18 points or larger (or 14 points or larger, if bold) must have a contrast of at least 3:1.
If the text is purely decorative.
If the text is an incidental part of an image (for example, a man who is reading a newspaper or a landscape that happens to include a street sign).
Brand logos.
Link Colors
If you don’t underline your links, there’s not much flexibility if you want to be Level AA, let alone Level AAA conformant.
See working examples of 26 web-safe colors that pass 3:1 vs black and 5:1 vs white criteria. These colors should be used for links that do not have underline text decoration. For designers/developers, see UX Pattern Library for more detail.
WCAG 2.0 Guidelines
WCAG 2.0 Guideline 1.4.1 - Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. (Level A)
WCAG 2.0 Guideline 1.4.3 - Visual presentation requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. (Level AA)
WCAG 2.0 Guideline 1.4.6 Visual presentation requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text. (Level AAA)
Color & Contrast Checker
Last updated