Ensure text and controls have enough color contrast
Overview
Text and interactive elements need to have high contrast so that your content is readable to all users. High contrast especially benefits site visitors that may have low vision or experience color blindness. It can also help mobile users still see content even if the screen is being affected by sun glare.
Best Practices and Tips
The minimum contrast ratio allowed for regular or smaller text is 4.5:1.
For 14pt bolded text (18 pixels bolded) or 18pt (24 pixels) standard text, the minimum ratio is 3:1. Important graphical icons, and user interface controls like radio buttons and checkboxes, must also meet the 3:1 contrast ratio.
Exceptions to Color Contrast Requirements
There are some exceptions to the color contrast requirements in WCAG 2.2.
- Pure decoration: words used as a decorative element have no color contrast requirement (example: words repeated over and over in the background).
- Inactive Components: text on an inactive element or component (i.e. disabled state) does not need to meet a contrast requirement until they can be interacted with. However, it is highly recommended to make inactive states just meet the 4.5:1 ratio and make active elements even higher contrast.
- Text not seen by anyone: there is no contrast requirement if nobody shouldn't see the content at a given time.
- Significant Image Content: if there is text or images of text that are part of an image containing other significant content, that has no contrast requirement. This refers to text that happens to be in an image, but not the central focus. Example: a photo of an event, with a banner containing text in the background.
- Images of text where the text is the primary content must meet contrast requirements, see the following "images of text" section.
Images of Text and Logos
Images of text (as opposed to true HTML text) still fall under these contrast requirements, with the exception of logotypes. Logotypes include Western logos or anything essential to the brand, and don't have a minimum contrast requirement.
Examples/Patterns
Good Contrast: Text
This text is black
The black font on white background has a contrast of 16:1.
Bad Contrast: Text
This text is gray
The gray text against white has a 1.2:1 ratio, well below the 4.5:1 requirement and is hardly visible.
Bad Contrast: CTA link
Blue Link with Light Green Background
The blue text on a light green background has a contrast of 2.8:1, which is too low and could be hard to read.
Good Contrast: Checkbox
The checkmark has enough contrast against the checkbox background color.
Bad Contrast: Checkbox
The checkmark here doesn't have enough contrast against the checkbox background color.