ColorFinderscolour instruments

Contrast checker

Color contrast checker

Measure a text colour against its background and read the WCAG 2.2 result, with the reason.

Nearest foreground that reaches 4.5:1 is #717782 at 4.50:1.

Large text at 24 pixels

Body text at 16 pixels. A contrast ratio is a floor rather than a target, so read the sample and decide whether it is comfortable at the size and weight you will really ship.

Small print at 13 pixels, the size people skip.

UI border at 3:1

How the ratio is calculated

Each colour is converted to relative luminance: the sRGB transfer curve is undone so the channels become linear light, then they are weighted 0.2126 red, 0.7152 green and 0.0722 blue. Those weights reflect how much each primary contributes to perceived brightness. Green does most of the work, which is why a saturated blue on black is so much harder to read than a green of the same nominal lightness.

The two luminances are then compared as (lighter + 0.05) ÷ (darker + 0.05). The 0.05 accounts for ambient light reflecting off a real screen. The result runs from 1:1 for identical colours to 21:1 for black on white.

What the thresholds mean

  • 4.5:1: AA for body text, and the baseline most projects are held to.
  • 3:1: AA for large text, and for user interface components and meaningful graphics.
  • 7:1: AAA for body text, worth reaching for on long-form reading.
  • 4.5:1: AAA for large text.

What the ratio does not tell you

It is a measurement of two flat colours, so it says nothing about a gradient behind text, a photograph behind a caption, or text over video. It also does not model font weight: a hairline weight at 4.5:1 can be harder to read than a medium weight at 4:1. And it is computed in sRGB, so it will not describe a wide-gamut display exactly.

Newer perceptual models such as APCA measure this better, but WCAG 2.2 (and most legal requirements written against it) still uses the ratio on this page, which is why it is the one reported here.

Fixing a failing pair

Change lightness, not hue. Moving a colour toward black or white changes its luminance fast, while changes in hue or saturation barely move the ratio. The suggestion above does exactly this: it holds hue and saturation and walks lightness in whichever direction reaches 4.5:1 first.

If you sampled the background out of a photograph, remember the photograph is not one colour. Check the lightest and the darkest part of the region the text will sit on, not just the middle. The image color picker makes that quick.

Frequently asked questions

Where does the 4.5:1 number come from?

WCAG 2 sets it as the level at which someone with roughly 20/40 vision (the sort of loss common by around age 80, or with uncorrected mild impairment) can read body text comfortably. The 3:1 allowance for large text exists because bigger, heavier letterforms stay legible at lower contrast.

What counts as large text?

At least 18 point, which is about 24 pixels at default settings, or at least 14 point bold, which is about 18.66 pixels. It is the rendered size that matters, not the size in your design file, and bold counts only if the font really is bold.

Does this cover icons and form borders?

Partly. WCAG 1.4.11 requires 3:1 for the parts of a user interface component you need to see to use it: the border of an input, the outline of a focus ring, the meaningful part of an icon. This page reports that threshold separately. Purely decorative graphics and disabled controls are exempt.

My colours pass but the text still looks faint. Why?

The ratio only measures luminance. It does not know about font weight, letterform, size beyond the large-text cut-off, or how much text there is. Thin weights at small sizes can pass and still be hard work. Treat the ratio as a floor, not a target.

How do you handle transparency?

A contrast ratio is only defined between two opaque colours. If your foreground has an alpha value below 1, it is composited over the background first, and the ratio is computed on the result, which is what a reader actually sees.

Read the guide