-
Providing Sufficient Color Contrast
An important aspect of color on the Web for both low vision and color-blind users is sufficient contrast between foreground (text or graphics) and the background. When designing the color scheme of a website, web page, or document, be sure to consider whether there is sufficient contrast between foreground text and background.
Guidelines
WCAG 2.0 The WCAG 2.0 guideline 1.4.3 recommends the following luminosity ratio standard of 1 to 4.5 for main text and 1 to 3 for large-scale text (18 points+, or 14 points+ bold).
NOTE: If your target audience is mostly low vision, then a ratio of 1 to 7 is recommended.- Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
- Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
- Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.e
Overview
Some users have difficulty perceiving text if there is too little contrast between foreground and background. The W3C Web Content Accessibility Guidelines 2.0 define specific contrast ratios that must be met in order comply at particular levels. In order to meet the guidelines at Level AA, text or images of text must have a contrast ratio of at least 4.5:1 (or 3:1 for large text). In order to meet the guidelines at the stricter Level AAA, the contrast ratio must be at least 7:1 (or 4.5:1 for large text).
Testing for Contrast
The WebAIM Color Contrast Checker is a website that provides an excellent companion to the Colour Contrast Analyser. Its most useful feature is a set of “Lighten” and “Darken” links that can be used to make subtle changes to existing colors until a Pass rating is attained.
Additional Contrast Testing Tools
