Color contrast of text against its background

TODO: This content should be reviewed and restructured.

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)

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