color-contrast

Ensure that text elements have an adequate color contrast with the background.

Description

Ensure that all text elements meet the WCAG 2 AA contrast ratio thresholds, with sufficient contrast between the foreground text and the background colors.

Why is it important?

People with low vision often struggle with low contrast, making it challenging to distinguish outlines, borders, and details due to minimal variation in brightness. Insufficient contrast between text and the background can significantly impact readability. It’s important to note that there are nearly three times more individuals with low vision than those with total blindness. For individuals with low vision or color blindness, distinguishing text from the background becomes difficult without adequate contrast. Additionally, considering color transparency and opacity in the background is essential. While it is relatively straightforward to account for these factors in the background, detecting and addressing transparency and opacity in the foreground can be more challenging due to various elements and CSS properties involved. In general, most people find text easier to read when there is a sufficiently high contrast against the background.

Examples

• Success:

  • The contrast ratio of the text color against the page’s white background for a <h1> heading is 3.75:1

• Failure:

  • The contrast ratio of the text color against the page’s white background for a <h1> heading is 2.75:1

How to fix?

Make sure to maintain a color contrast ratio of at least 4.5:1 for small text and 3:1 for large text, even if the text is embedded within an image. In this context, large text refers to text that is either 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels), as specified in the requirements.

Tags

cat.color, wcag2aa, wcag143

References

• WCAG 1.4.3: Contrast (Minimum)
• Deque University: color-contrast
• Accessibility Insights: color-contrast
• Evinced Digital Accessibility Knowledge Base: color-contrast