What contrast ratio does WCAG require?

At level AA, at least 4.5:1 for normal text and at least 3:1 for large text and interface components. At level AAA, 7:1 for normal text and 4.5:1 for large text.

What counts as large text?

According to W3C, at least 18 point or at least 14 point bold. For many body fonts that's about 1.5 times the default size, or about 1.2 times for bold.

Is 4.49:1 good enough?

No. W3C asks that the ratio isn't rounded. Even 4.499:1 doesn't meet the 4.5:1 threshold, and neither does 4.49:1.

Do logos and disabled buttons count?

No. There is no contrast requirement for text in a logo or brand name, or for text in an inactive interface component.

Can I check semi-transparent colours?

This tool only takes opaque hex codes. For a semi-transparent colour, find the final opaque colour it produces on top of its background and enter that.

Contrast checker: WCAG colour contrast ratio

Check the contrast

Contrast checker

Text colour (hex)

Background colour (hex)

JavaScript is off, so the result for the sample colours is shown below. The formula is in the "Formula and source" section.

Normal text looks like this.

Large text looks like this.

Interface border

Contrast ratio

3.54:1

Normal text · AA at least 4.5:1Fail
Normal text · AAA at least 7:1Fail
Large text · AA at least 3:1Pass
Large text · AAA at least 4.5:1Fail
UI component · AA (1.4.11) at least 3:1Pass

Normal text doesn't pass AA. The nearest shades that pass:

Darker shade: #767676 (4.54:1)

Type a hex code or use the colour picker. The ratio is recalculated on every change. Suggestions only change the text colour, never the background.

How to read the result

The checker looks at five thresholds at once. All of them come from W3C's WCAG 2.2 text.

What	AA	AAA
Normal text (1.4.3, 1.4.6)	4.5:1	7:1
Large text	3:1	4.5:1
UI components and graphics (1.4.11)	3:1	None

According to the W3C definition, large text is at least 18 point, or at least 14 point bold. W3C notes that for many body fonts this is about 1.5 times the default size, or about 1.2 times for bold. Measure it in your own font anyway.

The ratio isn't rounded. W3C says so explicitly: 4.499:1 doesn't meet the 4.5:1 threshold. That's why the checker cuts off everything after two decimal places.

The contrast requirement doesn't apply to all text. Text in an inactive interface component and text that is pure decoration are exempt. Text that is part of a logo or brand name is exempt too.

1.4.11 looks at the parts that aren't text. The visual information needed to identify a component and its state must be at least 3:1 against the colour next to it. A border that marks out a form field, or the indicator that shows a selected state, are examples.

In audits, what breaks this rule most often is form fields with light grey borders. On a white background you can't tell where the field starts.

An example: light grey text

The checker opens with #888888 grey text on white. The ratio comes out at 3.54:1. At level AA that's enough for large text and interface borders, but not for normal text.

I see greys like this most in form hints and the small print under dates and prices. They look sleek in the design file and disappear when you read a phone in the sun.

The faint sample text inside a form field (the placeholder) is covered by the rule too. W3C says so explicitly on its Understanding 1.4.3 page.

The suggestion box gives #767676 from the same grey family. Its ratio is 4.54:1, so it passes AA. Side by side, the two greys are hard to tell apart, but only one of them meets the threshold.

Try it the other way round as well. The "Swap colours" button swaps the text and the background. The ratio stays the same, because the formula always puts the lighter colour on top. The suggestions change, though, because this time it looks for a shade for white text.

Formula and source

The checker uses the relative luminance definition from W3C's WCAG 2.2 text exactly. Relative luminance is a value that is 0 for the darkest black and 1 for the lightest white. The calculation has four steps:

For both colours, divide the red, green and blue channel values (0–255) by 255.
If the result is 0.04045 or less, divide it by 12.92. Otherwise add 0.055, divide by 1.055 and raise it to the power of 2.4.
Work out the luminance: L = 0.2126 × R + 0.7152 × G + 0.0722 × B.
Work out the ratio: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour's luminance and L2 the darker one's.

Try black and white. White has an L of 1, black an L of 0. The ratio is 1.05 / 0.05, which is 21:1, the highest possible value.

In older sources you may see 0.03928 instead of 0.04045. According to W3C, the value in the definition was 0.03928 before May 2021, taken from an older version of the sRGB specification. The change makes no practical difference to the calculations in these guidelines.

The calculation assumes the sRGB colour space.

Why 4.5:1? According to W3C's Understanding 1.4.3 page, 3:1 is the minimum ratio ISO-9241-3 and ANSI-HFES-100-1988 recommend for standard vision. 20/40 visual acuity is associated with roughly a 1.5 times loss in contrast sensitivity, so the ratio needed for someone with 20/40 vision is 3 × 1.5 = 4.5:1.

How do I fix a colour that fails?

The suggestion box keeps the hue and saturation of the text colour and only changes its lightness. It looks for the nearest darker and the nearest lighter colour that passes AA. That way you see the value closest to your brand colour that meets the threshold.

Which suggestion to pick depends on the background. On a light background the darker shade usually works; on a mid-tone background both may appear.

W3C counts setting a text colour without a background colour as a failure. The reason is simple: you can't know the user's default colours. Always set both together.

Contrast is only one part of accessibility. I cover the other criteria in the WCAG guide. If you want your whole product looked at, a UX Audit includes the core WCAG 2.2 checks too. In my view, unreadable text is one of the easiest usability problems to fix.