CalcOpenly
English

Color contrast checker (WCAG 2.2)

Check the WCAG 2.2 contrast ratio between a text color and its background, with AA and AAA pass or fail for normal text, large text and UI parts.

Drafted with AI writing toolsUpdated Checked examples: 5

#RRGGBB, a CSS name, rgb(), hsl() or oklch().
Try
Contrast ratio
:1
Contrast ratio: 14.67 :1
Decimal places: 2; Toward zero
AA normal text (≥ 4.5:1)
Pass
AA large text (≥ 3:1)
Pass
AAA normal text (≥ 7:1)
Pass
AAA large text (≥ 4.5:1)
Pass
UI components (≥ 3:1)
Pass
Text luminance
0.0215
Background luminance
1.0000

#1F2937 on #FFFFFF has a contrast ratio of 14.67:1, which passes AA normal text; AA large text; AAA normal text; AAA large text; UI components.

#1F2937 text on #FFFFFF

Normal text, 16 px: The quick brown fox jumps over the lazy dog

Large text, 24 px (18 pt): The quick brown fox jumps over the lazy dog

Large bold text, 19 px (14 pt): The quick brown fox jumps over the lazy dog

Where the ratio falls

FailLargeAAAAA134.572114.67:1
How it's calculated S

  1. Linearise each channel

    Clin={C/12.92C≤0.04045((C+0.055)/1.055)2.4C>0.04045(R,G,B)lin,f=(0.0137,0.0222,0.0382)\begin{aligned} C_{lin} &= \begin{cases} C/12.92 & C \le 0.04045 \\ ((C + 0.055)/1.055)^{2.4} & C > 0.04045\end{cases} \\ (R, G, B)_{lin,f} &= (0.0137, 0.0222, 0.0382) \end{aligned}

    WCAG uses 0.04045 for the sRGB transfer threshold. The earlier 0.03928 value was updated in May 2021; no 8-bit channel lies between the two thresholds.

  2. Relative luminance

    Lf=0.02153,Lb=1.00000L_f = 0.02153,\quad L_b = 1.00000

  3. Contrast ratio (lighter over darker)

    1.00000+0.050.02153+0.05=14.6791\frac{1.00000 + 0.05}{0.02153 + 0.05} = 14.6791

    Compared with the thresholds unrounded: 4.5 for normal text at AA, 3 for large text and UI parts, 7 and 4.5 at AAA.

About the color contrast checker

WCAG measures contrast as (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminances of the lighter and darker color. Each luminance comes from the linearized sRGB channels, weighted 0.2126 for red, 0.7152 for green and 0.0722 for blue, so the ratio runs from 1:1 for identical colors to 21:1 for black on white.

Designers and developers check it before shipping text, buttons and icons. The default, #1F2937 slate text on a white background, measures 14.67:1 and passes all five checks, while #777777 on white displays 4.47:1, just under the 4.5:1 that AA needs for normal text.

The ratio is truncated to two decimals and compared unrounded, as WCAG requires, so 4.499:1 fails the 4.5:1 threshold. Here f marks the foreground and b the background. Alpha is ignored; blend a semi-transparent color onto its background first.

How to calculate the WCAG contrast ratio

Convert each color to its relative luminance L, then divide the lighter value plus 0.05 by the darker value plus 0.05: (L1 + 0.05) ÷ (L2 + 0.05). The ratio runs from 1:1 to 21:1. WCAG 2.2 level AA needs 4.5:1 for normal text and 3:1 for large text and interface parts. Gray #767676 on white just passes at 4.54:1.

Relative luminance by hand

Take #1F2937 text on a white background:

  1. Scale each channel to 0–1: R = 31 ÷ 255 = 0.1216, G = 41 ÷ 255 = 0.1608 and B = 55 ÷ 255 = 0.2157.
  2. Linearize each value C: if C ≤ 0.04045 use C ÷ 12.92, otherwise ((C + 0.055) ÷ 1.055)^2.4. That gives 0.0137, 0.0222 and 0.0382.
  3. Weight the channels: L = 0.2126 × 0.0137 + 0.7152 × 0.0222 + 0.0722 × 0.0382 = 0.0215.
  4. White has L = 1, so the ratio is (1 + 0.05) ÷ (0.0215 + 0.05) = 14.679, reported as 14.67:1.

The ratio is cut to two decimals, never rounded up, so a pair just under a threshold never appears to pass. The formulas come from WCAG's definition of relative luminance. Green carries the largest weight because the eye is most sensitive to it.

WCAG 2.2 contrast requirements

Large text means at least 18 pt, or 14 pt bold. At 96 CSS pixels per inch that is 24 px regular or about 18.7 px bold. Logos, purely decorative text and text on disabled controls have no contrast requirement.

Pass and fail examples on white

ScenarioDisplayed ratioAA normalAAA normal
Default14.67PassPass
Black on white21.00PassPass
#777777 on white4.47FailFail
#767676 on white4.54PassFail
Identical white1.00FailFail

Default is the #1F2937-on-white pair worked above. Swapping text and background gives the same ratio, so white text on #1F2937 also measures 14.67:1.

#777777 and #767676 differ by one step per channel, yet only #767676 reaches 4.5:1. That makes it the lightest neutral gray that passes AA for normal text on white.

Transparency, images and states

  • Blend transparent colors first. Black at 50% opacity over white shows as a mid-gray, #7F7F7F or #808080 depending on rounding, which measures about 4.0:1 and fails AA normal text. Checked as opaque black, the same color would pass at 21:1.
  • Text over photos or gradients. Measure against the part of the background closest in luminance to the text, not its average.
  • Every interactive state. Hover, focus and selected fills each form a new pair with the label, and focus indicators need 3:1 against what surrounds them.
  • Dark themes. A dark mode is a separate set of pairs, so check it on its own.

Common contrast mistakes

  • Rounding up. #777777 on white is 4.478:1. It displays as 4.47 and fails, because WCAG allows no rounding to 4.5.
  • Trusting HSL lightness. Yellow #FFFF00 and blue #0000FF both have 50% HSL lightness, but on white yellow measures 1.07:1 and blue 8.59:1.
  • Using the large-text threshold for body copy. A pair at 3.5:1 passes AA only as large text.
  • Checking the wrong neighbor. A button label is measured against the button fill, while the button's edge is measured against the page.

Accepted color formats

  • #RRGGBB or #RGB, CSS color names, rgb(), hsl() and oklch().
  • Alpha is ignored, so blend first as above. An oklch() color outside sRGB is clipped into range, with a warning.

Use the color converter to translate codes, and the color-blindness simulator to check that hue differences survive color vision deficiency.

Worked examples

Black on white is the maximum

Text color
#000000
Background color
#FFFFFF
Contrast ratio
21.00 :1
AA normal text (≥ 4.5:1)
Pass
AAA normal text (≥ 7:1)
Pass

Checked against: WCAG 2.2 definition: (1 + 0.05) / (0 + 0.05) = 21

#777777 on white just misses AA

Text color
#777777
Background color
#FFFFFF
Contrast ratio
4.48 :1
AA normal text (≥ 4.5:1)
Fail
AA large text (≥ 3:1)
Pass
UI components (≥ 3:1)
Pass

Checked against: Luminance of 0x77 = 0.18447…, (1.05) / (0.23447…) = 4.4781…

#767676 on white passes AA

Text color
#767676
Background color
#FFFFFF
Contrast ratio
4.54 :1
AA normal text (≥ 4.5:1)
Pass
AAA normal text (≥ 7:1)
Fail
AAA large text (≥ 4.5:1)
Pass

Checked against: 1.05 / (0.18116… + 0.05) = 4.5422…

Same color on itself (edge)

Text color
teal
Background color
#008080
Contrast ratio
1.00 :1
AA large text (≥ 3:1)
Fail
UI components (≥ 3:1)
Fail

Checked against: WCAG 2.2 definition: (L + 0.05) / (L + 0.05) = 1

Questions

What contrast ratio does WCAG require?

Level AA needs at least 4.5:1 for normal text and 3:1 for large text (success criterion 1.4.3), and 3:1 for user interface components and meaningful graphics (1.4.11). Level AAA raises text to 7:1 and large text to 4.5:1 (1.4.6). Logos, disabled controls and purely decorative text have no requirement.

What counts as large text in WCAG?

Large text is at least 18 point, or 14 point when bold. In CSS, where 1 pt is 1.333 px, that is 24 px for regular weight and about 18.66 px for bold. W3C's Understanding document puts these at roughly 1.5 em and 1.2 em of default body text, and warns that very thin fonts may need more. Large text only needs 3:1 at AA instead of 4.5:1.

What is the lightest gray text that passes AA on white?

#767676, which gives 4.54:1 on #FFFFFF. One step lighter, #777777, displays 4.47:1 and fails, because WCAG compares the exact ratio with 4.5 and allows no rounding up. For large text you can go much lighter: any gray that reaches 3:1, such as #949494 at 3.03:1, passes AA.

Did WCAG 2.2 change the contrast requirements?

No. WCAG 2.2 became a W3C Recommendation on 5 October 2023 and added 9 success criteria, mainly on focus visibility, target size and authentication, but the contrast criteria 1.4.3, 1.4.6 and 1.4.11 are the same as in WCAG 2.1. A color pair that passed under 2.1 still passes under 2.2, at the same 4.5:1 and 3:1 thresholds.

Does the order of text and background colors matter?

No. The formula always puts the lighter color's luminance on top, so white text on #1F2937 and #1F2937 text on white both measure 14.67:1. What changes is how the pair reads: light text on a dark background can look thinner or bolder depending on the font and screen, so check the actual rendering too, especially at small sizes.

About this calculator

r=L1+0.05L2+0.05L=0.2126Rlin+0.7152Glin+0.0722Blin\begin{aligned} r &= \frac{L_1 + 0.05}{L_2 + 0.05} \\[4pt] L &= 0.2126 R_{lin} + 0.7152 G_{lin} \\ &\quad + 0.0722 B_{lin} \end{aligned}

Sources

  1. W3C WCAG 2.2 — Success Criteria 1.4.3, 1.4.6 and 1.4.11; definitions of contrast ratio and relative luminance
  2. W3C Understanding SC 1.4.3 — large text is at least 18 pt, or 14 pt bold

Checked against references

This calculator includes 5 worked examples with independently sourced answers. They run in the test suite, and you can run them here too.

Put this calculator on your site

Paste this where you want the calculator to appear. It is free to use, it stays in step with corrections made here, and the credit line below it links back so your readers can find the full version.

Height
Preview the embed

Keep the credit line. It is the only condition, and it is what keeps these calculators free.

Related calculators