Accessibility Insights

Back to Info and Examples for Accessibility Insights for Web


Text elements must have sufficient contrast.

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 check

Use Accessibility Insights for Windows (or the Colour Contrast Analyser if you're testing on a Mac) to manually verify that the text has sufficient contrast against the background. If the background is an image or gradient, test an area where contrast appears to be lowest.

If the text has sufficient contrast against all areas of the background, then no changes are needed.

If the element is an icon or other non-text content, then this requirement does not apply.

For detailed test instructions, go to Assessment > Adaptable content > Contrast.

How to fix

If the text has a contrast ratio of 1:1 and is intended to be hidden, mark the element with aria-hidden="true".

If the text is intended to be visible, adjust its foreground color and/or background color to provide sufficient contrast.

  • 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.




A small amount of white text is centered over a large background image. Portions of the text don't have sufficient contrast against the background. Some people will find the text difficult to read.


An overlay is used to darken the background image in the area beneath the white text. Where the image has no text, it retains its original colors. The darker background provides sufficient contrast with all portions of the text. Most people will find the text legible.

About this rule

Instances need review if ANY of the following are true:

  • Element's background color can't be determined (for example, because of an image or gradient)
  • Element's foreground color can't be determined (for example, because of transparency)
  • Element's foreground and background have a 1:1 contrast ratio
  • Element is overlapped or obscured by another element
  • Element content is very short or contains non-text characters

More examples