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.

Tools to help design or check complete color palettes:

• Online Contrast Grid by Equalize Digital.
• Color Contrast Grid for Figma variables by Moritz Neugebauer.
• Contrast Grid for Figma by hiloki.

There are many tools to check color contrast ratios. WebAxe published an overview of contrast checkers. Populair tools are:

• Online Contrast Checker by WebAIM.
• 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).

Related pages in this documentation

Sufficient color contrast of text and UI controls in the Theme guidelines for the WordPress accessibility-ready program.

Other resources

• Assistive Technology Experiment: High Contrast by WebAIM.
• Color Contrast And Why You Should Rethink It by Cathy O’ Connor on Smashing Magazine.
• Sim Daltonism, an open source color-blindness simulator for MacOS and iOS.
• Colorblind Web Page Filter, a color-blindness emulating filter for a web page, by TopTal.
• Accessible color palette generator, a tool to generate accessible color palettes by Venngage.