WCAG 2.2 color contrast

Contrast Check it, understand it, fix it

Put in a text color and a background color: you get the ratio and a plain verdict for normal text, large text and interface parts. Below it, what WCAG 2.2 asks for, the nearest colors that pass, six ways to measure contrast, the pair through color blindness, and a matrix for a whole palette.

Quick check

WCAG 2.2

The quick check needs JavaScript. Without it, this is the example pair.

Hex, rgb(), hsl() or a CSS color name. A see-through color is blended first.

4.23:1 contrast ratio

Passes for large text and UI parts only. Normal text fails AA.

  • Normal text AA4.5:1Fails
  • Normal text AAA7:1Fails
  • Large text AA3:1Passes
  • Large text AAA4.5:1Fails
  • UI parts and graphics3:1Passes
Open in the full checker Fix this pair

The rules

What WCAG 2.2 asks for

Three success criteria set the numbers. Level AA is the one laws and contracts usually cite; AAA is stricter, and W3C does not recommend requiring it across a whole site.

Minimum contrast ratios in WCAG 2.2
WhatLevel AALevel AAASuccess criterion
Normal textAnything below the large-text size 4.5:1 7:1 1.4.3 Contrast (Minimum) 1.4.6 Contrast (Enhanced)
Large textAt least 24 px, or 18.66 px when bold 3:1 4.5:1 1.4.3 Contrast (Minimum) 1.4.6 Contrast (Enhanced)
UI components and graphicsControl borders and states, focus indicators, the parts of a chart needed to read it 3:1 No higher level 1.4.11 Non-text Contrast
Focus indicatorAt least a 2 px perimeter, changed between focused and unfocused Covered by 1.4.11 3:1 2.4.13 Focus Appearance

Large is a size, not a role

WCAG defines large text as 18 point, or 14 point bold. At 1 pt = 1.333 CSS px, that is 24 px regular or about 18.66 px bold. A light-weight heading at 20 px is normal text, whatever it is called.

What is exempt

  • Incidental text: in an inactive control, pure decoration, invisible, or part of a picture with other significant content.
  • Logotypes: text that is part of a logo or brand name.
  • Under 1.4.11, inactive components and controls the browser draws without author styling.
  • A control that only looks disabled but still works is not exempt.

Sources: Understanding 1.4.3, Understanding 1.4.11, Understanding 2.4.13 (W3C).

Fix

Fix a failing pair

The nearest colors that reach each target for the pair in the quick check. Each keeps its hue and chroma in OKLCH and changes only lightness, so a blue stays the same blue, a little darker or lighter.

Text
#2563EB
Background
#DBEAFE
Ratio
4.23:1
Change the pair

Normal text AA 4.5:1

Change the text

#205EE6 4.52:1

Or change the background

#E8F2FF 4.57:1

Normal text AAA 7:1

Change the text

#003CC3 7.07:1

Or change the background

No lightness of this background's hue gets there against this text.

Large text and UI parts 3:1

Change the text

Already passes. Nothing to change.

Or change the background

Already passes. Nothing to change.

The walk moves lightness in steps of 0.005 and stops at the first step that passes, so a fix lands just over its target. When the text cannot get there at its hue, moving the background, or both, may; black or white always reach further, at the cost of the color itself. How to make a brand color accessible

Lightness

Every lightness that passes

The text color at every lightness of its own hue, each measured on the background in the quick check. The bands show where it reaches each target, and the marker shows where it is now.

OKLCH lightness of the text color, from black to white, against the background. Bands mark where it reaches 3:1, 4.5:1 and 7:1.
The text color now
55%
Large text and UI parts 3:1
0%–62%
Normal text AA 4.5:1
0%–53%
Normal text AAA 7:1
0%–43%

Lightness is OKLCH L, the first number in oklch(). Hue is kept and chroma is trimmed only where sRGB cannot show it, so every color on the strip is one you could use. A background in the middle of the range can leave two bands: one darker, one lighter.

The maths

How the ratio is worked out

WCAG compares the relative luminance of the two colors: how much light each gives off, from 0 for black to 1 for white.

The ratio runs from 1:1, the same color twice, to 21:1, black on white.

The definition in WCAG 2.2
  1. Scale each channel from 0–255 to 0–1 by dividing by 255.
  2. Undo the sRGB curve. A value at or below 0.04045 is divided by 12.92; above it, add 0.055, divide by 1.055 and raise to the power 2.4.
  3. Weight the three channels and add them: L = 0.2126 R + 0.7152 G + 0.0722 B. Green counts most because the eye is most sensitive to it.
  4. Divide the lighter by the darker, each plus 0.05: (L1 + 0.05) / (L2 + 0.05).
The working for the pair in the quick check
StepText #2563EBBackground #DBEAFE
Channels, 0–25537, 99, 235219, 234, 254
Divided by 2550.1451, 0.3882, 0.92160.8588, 0.9176, 0.9961
sRGB curve undone0.0185, 0.1248, 0.83080.7084, 0.8228, 0.9911
Relative luminance L0.15320.8106

(0.8106 + 0.05) / (0.1532 + 0.05) = 4.2363

Shown to four decimal places; the division uses full precision. Change the pair in the quick check and this working follows it.

Why 4.499 fails

WCAG says the ratio is not rounded: 4.499:1 does not meet 4.5:1. A tool that rounds can turn a fail into what looks like a pass.

Green #338811 on white, measured
4.4963
Rounded to two places
4.50:1
Cut to two places, as this site shows it
4.49:1Fails

So every ratio on this site is cut to two decimals, never rounded up.

0.04045 or 0.03928?

Until May 2021 WCAG printed 0.03928 where it now prints 0.04045, a figure taken from an older version of the sRGB specification. No 8-bit channel value falls between the two, so every hex color gets the same answer either way.

10/255
0.0392
11/255
0.0431

Models

Six ways to measure a pair

The WCAG 2 ratio is the one audits and laws use. Design systems, display standards and color science measure the same pair in other ways, and they do not always agree. Every card follows the pair in the quick check.

  • WCAG 2 contrast ratio

    The requirement

    4.23:1

    Large text and UI parts only

    The relative luminance of the lighter color over the darker, each plus 0.05 for screen glare.

    (L1 + 0.05) / (L2 + 0.05)

    Scale
    1:1 – 21:1
    Where you meet it
    WCAG 2.2, EN 301 549, Section 508.

  • APCA lightness contrast

    A WCAG 3 candidate

    Lc +61

    Content text

    Perceptual contrast that knows which color is the text: positive for dark text on light, negative for light on dark.

    Lc, APCA-W3 0.0.98G-4g

    Scale
    Lc −108 – +106
    Where you meet it
    Size and weight guidance, and the WCAG 3 drafts. WCAG 2 and APCA

  • Luminance modulation

    ISO 9241-3

    0.68

    Meets the 0.5 minimum

    Michelson contrast of the two luminances, with no allowance for glare.

    (L1 − L2) / (L1 + L2)

    Scale
    0 – 1
    Where you meet it
    Display ergonomics standards. WCAG traces its 3:1 to ISO 9241-3, whose minimum modulation of 0.5 is the same 3:1 measured another way.

  • Tone difference

    Material Design

    ΔL* 46.0

    A gap of 40 to 50

    The gap in CIELAB lightness, from 0 for black to 100 for white. Material Design's HCT color space calls it tone.

    |L*₁ − L*₂|

    Scale
    0 – 100
    Where you meet it
    Material's rule of thumb: a gap of 40 for 3:1, 50 for 4.5:1.

    Measured exactly, a gap of 40 never falls below 3.16:1, but a gap of 50 can land at 4.48:1, just under 4.5:1. Use the gap to plan, then measure the ratio.

  • Color difference

    CIEDE2000

    ΔE00 38.7

    Distinct

    How different the two colors look overall: lightness, chroma and hue together.

    ΔE00 (CIE 2001)

    Scale
    0 – about 100
    Where you meet it
    Matching and telling colors apart, as in 1.4.1 Use of Color. Not a readability measure: two colors can look very different and still have almost no contrast.

  • Weber contrast

    Reading research

    −0.76

    Dark text on a light background

    The change in luminance from the background to the text, as a share of the background, with the same 0.05 for glare.

    (Lt − Lb) / (Lb + 0.05)

    Scale
    −0.95 – +20
    Where you meet it
    Vision and reading studies. No pass mark of its own: for light text on a dark ground, the WCAG ratio is exactly this figure plus 1.

Color vision

The same pair, through color blindness

Each row simulates a full deficiency (Machado, 2009). Contrast barely moves, because the simulations keep lightness; what shrinks is the difference in hue.

The pair in the quick check, as each type of color vision sees it
VisionSeen asWCAG 2APCAΔE00
Typical color vision#2563EB / #DBEAFE4.23:1Lc +6138.7
Protanopia#0076F0 / #E3EAFF3.60:1Lc +5636.8
Deuteranopia#0064E8 / #E0E7FE4.27:1Lc +6140.7
Tritanopia#00869D / #D3EEF03.52:1Lc +5533.4
Achromatopsia#6D6D6D / #E8E8E84.22:1Lc +6235.9

When only hue tells two colors apart

Red #DC2626 and green #16A34A look nothing alike to most people, yet as text on each other they reach only 1.46:1. Their difference is all hue, and with deuteranopia it nearly vanishes. ΔE00 with typical color vision: 72.4; with deuteranopia: 7.9.

So contrast is what keeps text readable for everyone, and a status shown only in red or green needs a word, an icon or a pattern as well.

Color blindness, type by type Color blindness simulator 1.4.1 Use of Color

Hard cases

When one ratio is not the whole answer

The formula takes two flat colors. Real interfaces put text on photos, gradients and see-through layers, and change colors on hover, focus and in dark mode. Here is what to measure in each case.

Text over images

A photo has thousands of background colors, and the text has to clear the worst one behind it: the lightest, for light text. A scrim makes that worst case known.

White text on a 60% black scrim, over a white pixel
#6666665.74:1Passes
The same scrim at 50%
#7F7F7F4.00:1Fails

A darker pixel only adds contrast, so at 60% white text passes anywhere on the photo. Without a scrim, sample the lightest and darkest pixels behind the text with the image picker and check both. An automated scan samples one background color, so treat its verdict on a photo as a starting point.

Image color picker

Gradients

Check the weakest stretch behind the text, not the two ends. Dark text #111827 on a pink-to-blue gradient passes at both ends and fails in the middle.

  1. 0% 5.02:1
  2. 25% 4.41:1
  3. 50% 4.18:1
  4. 75% 4.34:1
  5. 100% 4.82:1
Blended in sRGB, the default for hex colors. Lowest: 4.15:1
The same two colors blended in OKLab. Lowest: 4.81:1

background: linear-gradient(in oklab 90deg, #EC4899, #3B82F6);

Hex colors in a gradient blend in gamma-encoded sRGB unless you name another space, which dims the middle between two hues; we checked that Chromium paints it so. The Gradient Library tool checks white and black text at 20 points across a gradient.

Open the Gradient Library tool Color gradients and interpolation

Transparency

Blend first, then measure. A see-through color is painted as a mix of itself and what is underneath, channel by channel: alpha × color + (1 − alpha) × background.

Black text at 50% opacity on white
#7F7F7F4.00:1Fails
The least whole percentage that passes: 54%
#7575754.60:1Passes

Browsers keep alpha in steps of 1/255, so a blended channel can differ by one from a hand calculation. The quick check blends for you: type a color with an alpha channel.

Bit depth, channels and alpha

Hover, pressed and disabled states

Every state is its own pair, and each one that carries text has to pass. Hover is where links usually slip.

A link on white
#2563EB5.16:1Passes
Lightened on hover
#3B82F63.67:1Fails
Darkened on hover instead
#1D4ED86.70:1Passes

Disabled controls are exempt; a control that still works has to pass in every state. To check every state against every surface at once, put the set into the Accessibility Lab tool.

Open the Accessibility Lab tool

Focus indicators

A focus ring is a UI part: it needs 3:1 against the colors next to it. Pale rings on white are the usual miss.

A pale ring on white
#93C5FD1.80:1Fails
A darker ring on white
#2563EB5.16:1Passes

At AAA, Focus Appearance also sets a minimum size and a 3:1 change between focused and unfocused. Focus Not Obscured is about sticky headers hiding the focus, not about color.

2.4.7 Focus Visible 2.4.13 Focus Appearance 2.4.11 Focus Not Obscured (Minimum)

Dark mode

A dark theme is a second set of pairs, and each one needs measuring on its own surfaces. An accent that passes on white often fails on a dark gray.

Blue on white
#2563EB5.16:1Passes
The same blue on dark gray #111827
#2563EB3.43:1Fails
A lighter blue on the same gray
#60A5FA6.97:1Passes

Pick each dark-theme accent from a lighter step of its scale and measure it on the actual surface, not on black.

Dark mode and adaptive color A dark UI theme, every pair measured

WCAG 2 and APCA

A second opinion, not the requirement

APCA, the Accessible Perceptual Contrast Algorithm, weighs which color is the text and how large and heavy the type is. It was developed as a candidate method for WCAG 3.

WCAG 2.2
4.23:1
APCA
Lc +61

Both numbers for the pair in the quick check.

The WCAG 2 ratio is symmetrical: swap text and background and the number does not change. APCA is not: dark text on a light ground and light text on a dark ground score differently, and the sign of Lc says which is which.

Text on #3B82F6: the two methods disagree
TextWCAG 2.2 ratioAPCA
White3.67:1 fails AALc −69
Black5.70:1 passes AALc +40

WCAG 2 ranks black text higher on this blue; APCA ranks white higher. Where they disagree, the WCAG 2 result is the one audits and laws use.

  • APCA is not part of WCAG 2. The standards that laws point to for contrast, such as EN 301 549 in Europe and Section 508 in the United States, use WCAG 2.
  • WCAG 3 is a W3C Working Draft. Its contrast method has not been decided, so nothing in it can be passed or failed yet.
  • Meet the WCAG 2.2 ratios first, then use APCA as extra guidance on size and weight.
  • This site computes APCA-W3 0.0.98G-4g; the numbers above are from that version.
WCAG vs APCA, compared in full

Type

Size and weight change the target

WCAG 2 sorts text into two sizes. APCA asks for more contrast the smaller and lighter the type.

Set a size and a weight for the pair in the quick check.

16 px
WCAG 2.2 counts it as
Normal text
Needed for AA
4.5:1Fails
Needed for AAA
7:1Fails
APCA bronze needs
Lc 90Fails
The pair has
4.23:1 · Lc 61

Large text in WCAG 2.2 is at least 24 px, or 18.66 px bold. APCA's bronze level defines only weights 400 and 700, so other weights count as the nearer of the two; this site holds weights under 400 one level stricter.

Palette

Every pair in a palette

Put in up to ten colors, such as your tokens, brand colors or a theme, and see each one as text on each of the others. Measure with the WCAG 2 ratio or with APCA.

Hex, rgb(), hsl() or names, separated by spaces, commas or new lines.

Measure with
Pairs measured
30
Reach the target
10
Each row is a text color, each column a background
#111827#FFFFFF#2563EB#DBEAFE#F59E0B#DC2626
#111827Same color17.73:1Passes3.43:1Fails14.54:1Passes8.26:1Passes3.67:1Fails
#FFFFFF17.73:1PassesSame color5.16:1Passes1.22:1Fails2.14:1Fails4.82:1Passes
#2563EB3.43:1Fails5.16:1PassesSame color4.23:1Fails2.40:1Fails1.07:1Fails
#DBEAFE14.54:1Passes1.22:1Fails4.23:1FailsSame color1.76:1Fails3.95:1Fails
#F59E0B8.26:1Passes2.14:1Fails2.40:1Fails1.76:1FailsSame color2.24:1Fails
#DC26263.67:1Fails4.82:1Passes1.07:1Fails3.95:1Fails2.24:1FailsSame color

APCA scores are signed: positive for dark text on a light background, negative for light on dark; the target applies to the size of the number. A see-through color is measured over white.

Where next

Check more, and build it in

From one pair to a whole page, a palette and a working pattern.

Further reading: Accessible color design and WCAG contrast, Color in data visualization, every WCAG criterion.

Method

How this page is checked

Every number here comes from the site's color engine, the same one behind the contrast checker, and an automated test recomputes each of them, so a figure on this page cannot drift from the code.

The page is checked with axe-core and driven by keyboard in Chromium, in light and dark themes, on desktop and phone widths. It has not been tested with a screen reader.

A ratio checks a success criterion; it is not a full conformance review, and it is not legal advice.

Found a wrong number? Tell us.