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
- The contrast ratio of the text color against the page’s white background for a
-
Failure:
- The contrast ratio of the text color against the page’s white background for a
<h1>
heading is 3.75:1
- The contrast ratio of the text color against the page’s white background for a
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
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
We're sorry to hear that. Please share your feedback so we can do better
Contact our Support team for immediate help while we work on improving our docs.
We're continuously improving our docs. We'd love to know what you liked
Thank you for your valuable feedback!