The WordPress project aims to maintain color contrast accessibility at the WCAG AA level. This requires that the contrast between background and foreground colors has a luminosity contrast ratio of 4.5:1 for most text, and allows 3.1:1 for large text, where large text is defined as an equivalency of
19px bold. These rules also apply to neighboring text, such as the difference between linked text neighboring unlinked text when there is no other differentiating feature, such as an underline.
The WCAG 2.0 standards for color contrast define large text sizes in points. For testing, we map these values to an equivalent pixel value. Use your browser’s inspector to check the font size in pixels, regardless of the unit used in CSS.
Guidelines (minimum) Guidelines (minimum)
The visual presentation of text and images of text should have a minimum contrast ratio of
4.5:1, with the following exceptions:
- Large Text: Large-scale text and images of large-scale text may have a minimum contrast ratio of
- 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.
How to Use Color How to Use Color
Color should not be used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
This means that, for example, a link embedded in content should be differentiated from the surrounding content by an indicator that’s not purely based on color, such as an underline. If color is the only method of differentiating the link from the surrounding text, then there must be a color contrast of
4.5:1 (for normal text) both between the linked text and the surrounding text and between the linked text and it’s background.
Tip: The Design Handbook “Colors” page covers the use of color in WordPress projects.
Technical Resources Technical Resources
- WCAG: Definition of Contrast Ratio
- WCAG on contrast (minimum), understanding SC 1.4.3
- WCAG on use of color, understanding SC 1.4.1
- Development tools for contrast checking and ratio calculation
- Theme developers handbook on color
- Handbook for theme reviewers about color