color-contrast-enhanced

Ensure that all text elements have an appropriate level of contrast between the foreground text and the background colors behind it, meeting the contrast ratio thresholds defined in WCAG 2 AAA.

Description

Ensure that all text elements meet the WCAG 2 AAA 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 contrast. 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 the various elements and CSS properties involved. In general, most people find text easier to read when there is 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 8.91:1

• Failure:

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

How to fix?

Ensure that there is a minimum color contrast of 7:1 for small text and 4.5:1 for large text, even when the text is included within an image. According to the requirements, large text is defined as 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels).

Tags

cat.color, wcag2aaa, wcag146

References

• WCAG 1.4.6: Contrast (Enhanced)
• Deque University: color-contrast-enhanced