This document is in beta. Help us by reporting issues via Github or email.

Back to the overview page

Text contrast

Make sure text has enough contrast.

Text must have a contrast ratio of at least 4.5:1 (or 3:1 in some cases) against its background colour.

On this page:



Guidance for Design

User tools like Sketch’s Stark plug-in, Colour Contrast Analyser to make sure that text has sufficient contrast.

More guidance for Design

Guidance for Quality Assurance

How to check whether two colour values have enough contrast

Use WebAIM’s Contrast Checker.

How to automatically check whether all the text currently shown on a web page has enough contrast

Use Deque Systems’ Axe extension for Firefox or Chrome, or Microsoft’s Accessibility Insights extension for Chrome.

How to manually check whether a piece of text on a web page has enough contrast

Follow these steps:

  1. Visit the web page using Firefox.
  2. Right click on the text that you want to inspect.
  3. Select 'Inspect element'.
  4. A new panel should appear on the right side of the web browser window. At the bottom left of that window, you can see all the CSS style rules that apply to the text element you're inspecting.
  5. At the top of that list of style rules, click on 'Filter styles' and type 'color'.
  6. In the filtered list, find the CSS style rule called 'color'.
    • If there are several, pick the one that's closest to the top of the list.
  7. Click on the small circle that shows a preview of the colour.
  8. At the bottom of the panel that opens, you should see something like: 'Contrast' followed by a contrast ratio number.
  9. If the contrast ratio is high enough given the size of the text, you'll also see 'AA✓' or 'AAA✓'.

More info

Official wording in the Web Content Accessibility Guidelines

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

See the W3C’s detailed explanation of this guideline with techniques and examples.

Note: In the guidelines, ‘Large-scale text’ is defined using CSS pt as a unit. But 1 CSS pt is 1.33333 CSS px (both units represent absolute lengths, not linked to the size of a physical pixel on a particular device). So 18pt = 24px.



This document is in beta. Help us by reporting issues via Github or email.