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
- 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 2.75:1
- The contrast ratio of the text color against the page’s white background for a
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
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!