Color contrast of text against its background

Color contrast is an important issue to address for the accessibility of your website. It should be considered for foreground (text and other elements) and background colors (or images), but also between elements and hover or focus states.

Color contrast should be high enough for good readability, but should not be too bright for people with sensitive eyes or cognitive problems.There are no WCAG criteria defining excessively high contrast, but very high contrast should be used selectively.

The WordPress project follows the accessibility level “AA” of WCAG.

This requires that the contrast between background and foreground colors has a luminosity contrast ratio of:

• 4.5:1 for normal text.
• 3:1 for large text (24px equivalent or 19px equivalent and bold).

Tip: Logos and logotype are exceptions to accessibility guidelines, including color contrast rules. If you’re designing a new logo, however, it might be a good idea to consider them, anyway.

There are many tools to check color contrast ratios. WebAxe published an overview of contrast checkers. You can test color contrast with these color checkers:

• contrastchecker.com (Online) — checks foreground/background contrast levels and also gives information on the accessibility levels of the contrast
• Colour Contrast Analyser (CCA), Vispero’s free color contrast checker for Windows and Mac, includes text and visual elements for individuals with color-blindness or low vision impairments.
• Background Image & Text Contrast Checker, by Andrew Brandwood.

Resources

WCAG Success Criteria for color contrast

• 1.4.3 Contrast Minimum(Level AA).
• 1.4.6 Contrast (Enhanced) (Level AAA)
• 1.4.11 Non-text Contrast (Level AA)

Other resources

• Assistive Technology Experiment: High Contrast
• Color Contrast And Why You Should Rethink It
• WCAG Color Contrast Guideline
• Color Contrast and why you should rethink it
• Sim Daltonism — a color-blindness simulator for Mac OS X.
• Colorblind Web Page Filter — apply a color-blindness emulating filter to a web page.
• Accessible color palette generator - Tool to generate accessible color palettes.