Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web


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.




In this page, <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.

h1 {color: #ee66cc; font-size=48px}



The font color specified for <h1> elements provides a contrast of 3.762:1, which is sufficient for large text. Most people will find it legible.

h1 {color: #ee22bb; font-size=48px}


About this rule

This rule passes if:

  • Element has sufficient contrast

More examples