Back to Info and Examples for Accessibility Insights for Web
color-contrast
Text elements must have sufficient contrast against the background.
Why it matters
Most people find it easier to read text when it has a sufficiently high contrast against its background. People with visual disabilities, low vision, limited color perception, or presbyopia are likely to find text unreadable when contrast is too low.
How to fix
Provide sufficient contrast for text elements.
A minimum contrast ratio of 3:1 is required for large text, defined as:
- 18pt (24 CSS pixels)
- OR bold 14pt (19 CSS pixels)
A minimum contrast ratio of 4.5:1 is required for smaller text.
Example
Fail
<h1> elements are styled to have a foreground color of #ee66cc and a font-size of 48px.
The font size qualifies the heading text as large. The contrast ratio of the text color against the page's white background is 2.843:1.
Because the minimum contrast ratio for large text is 3:1, the <h1> elements have insufficient contrast.
Some people will find the text difficult to read.<style>
…
h1 {color: #ee66cc; font-size=48px}
…
</style>
…
h1 {color: #ee66cc; font-size=48px}
…
</style>
Pass
<h1> elements provides a contrast of 3.762:1, which is sufficient for large text.
Most people will find it legible.<style>
…
h1 {color: #ee22bb; font-size=48px}
…
</style>
…
h1 {color: #ee22bb; font-size=48px}
…
</style>
About this rule
This rule passes if:
- Element has sufficient contrast