CSS GlanceHow to check color contrast for accessibility (WCAG AA and AAA)
Text must have a contrast ratio of at least 4.5:1 against its background to meet WCAG level AA, or 3:1 if it is large text. For level AAA the numbers are 7:1 and 4.5:1. You can read the ratio for any text in Chrome DevTools, using the Color Picker.
What the contrast ratio is
WCAG (the Web Content Accessibility Guidelines, published by the W3C) measures contrast as a ratio between the relative luminance of two colors, roughly how bright each one is. The ratio runs from 1:1 (the same color, no contrast at all) to 21:1 (black on white). A higher number is easier to read, especially for people with low vision or in bright light.
The ratio is not rounded when it is compared with a threshold. W3C’s guidance says that a computed 4.499:1 does not meet 4.5:1, even though it looks like 4.5 when shown with one decimal.
The thresholds
| Level | Success criterion | Normal text | Large text |
|---|---|---|---|
| AA | 1.4.3 Contrast (Minimum) | 4.5:1 | 3:1 |
| AAA | 1.4.6 Contrast (Enhanced) | 7:1 | 4.5:1 |
These come from the W3C’s “Understanding” documents for success criteria 1.4.3 and 1.4.6. AA is the level most often used as a working target; check what your project, client or local regulation requires.
What counts as large text
WCAG defines large text as 18 point or larger, or 14 point bold or larger. In CSS pixels, 18pt is about 24px and 14pt is about 18.5px (W3C’s own rounding; the exact conversion is closer to 18.67px). Bold text at 14pt, around 18.5px or more, therefore gets the lower ratio. Normal-weight text at 18.5px does not.
What is exempt
WCAG 1.4.3 sets no contrast requirement for incidental text. W3C lists text in an inactive user interface component, pure decoration, text that is not visible to anyone, and text that is part of a picture with other significant visual content. Text that is part of a logo or brand name is also exempt. Do not use these exceptions as a loophole: a gray, disabled-looking label that is actually clickable is not inactive.
Semi-transparent colors and background images
Semi-transparent colors. A text color or background with an alpha value (for example rgba(0, 0, 0, 0.5)) does not have one fixed color. What you see is that color blended with whatever is underneath it. To judge contrast you need the blended result, not the value written in the CSS. A tool that only reads the declared color will give the wrong answer; one that blends the layers will not.
Background images and gradients. WCAG measures contrast against the background the text is rendered over. W3C lists, as a documented failure (F83), using background images that do not give enough contrast with the text. A photo or gradient has many colors, so a single ratio can hide a problem: the text may pass over the dark part and fail over the light part. Check the worst spot behind the text, not the average. Many automated checkers cannot evaluate this case, so look at it with your own eyes as well.
How to check contrast in Chrome DevTools
Chrome’s documentation describes several places where contrast shows up. Names can vary between versions.
- Inspect tooltip. Click Inspect at the top-right of DevTools and hover over an element. The tooltip shows a warning sign next to the contrast ratio when it is a problem.
- Color Picker. Select the element, then open the Color Picker from the text’s
colordeclaration in the Styles tab. Expand the Contrast ratio section. It tells you whether the ratio meets the AA or AAA level. - Fix a color on the spot. In that section, click Use suggested color next to the AAA level to apply a color that passes, or drag the circle in the shades preview: stay below the top line for AA and below the bottom line for AAA.
- Find problems across the page. Open CSS Overview, capture an overview, then open the Colors section and look at Contrast issues. Alternatively run Lighthouse with the Accessibility category and open its Contrast section.
DevTools changes are temporary. Copy the new color into your source files, or they disappear when you reload.
Common fixes
- Darken the text or lighten the background (or the reverse in dark themes) until the ratio passes.
- Make text larger or bolder so that it counts as large text and the lower threshold applies, when the design allows it.
- Put a solid or semi-opaque layer behind text that sits on a photo or gradient, then check the ratio against the blended result.
- Check light gray secondary text, placeholders, captions and disabled-looking links. These are the usual failures.
- Check every state: hover, focus, selected and dark mode can have different colors from the default state.
Where CSS Glance fits
CSS Glance is a Chrome extension that shows the contrast ratio and an AA / AAA result for the element under your cursor. It blends semi-transparent layers when it works out the background. The AA / AAA result is a calculation aid, not a conformance certificate. It looks at background colors only, so for text over a background image or gradient you still need to check by eye. It cannot look inside iframes from other sites. It is free on the Chrome Web Store (Pro features are a one-time purchase).