WCAG 2.2 · APCA · six models · color vision

Contrast Checker

Two colors in. Out come the exact ratio, every WCAG 2.2 verdict, APCA at your type size, five other ways to measure the pair, how it reads with color blindness, and the nearest colors that pass. Nothing leaves your browser.

Try a pair

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

The pair

Hex, rgb(), hsl(), oklch() or a CSS color name. A see-through color is blended onto its background before it is measured.

Specimen

Result

Contrast ratio · WCAG 2.2

4.23:1

APCA

Lc +61

Content text

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

WCAG 2.2 success criteria
Applies toLevelNeedsCriterionResult
Normal text AA 4.5:1 1.4.3 Fails
Normal text AAA 7:1 1.4.6 Fails
Large text AA 3:1 1.4.3 Passes
Large text AAA 4.5:1 1.4.6 Fails
UI parts and graphics AA 3:1 1.4.11 Passes

Large text is at least 24 px, or 18.66 px bold. Pass and fail use the unrounded ratio; the figure is cut, never rounded up, so 4.499 reads 4.49:1.

Make it pass

Nearest color at the same OKLCH hue and chroma; only lightness moves.

  • AA 4.5:1 Move the text

    #205EE6 4.52:1

  • AA 4.5:1 Move the background

    #E8F2FF 4.57:1

  • AAA 7:1 Move the text

    #003CC3 7.07:1

  • AAA 7:1 Move the background

    No lightness at this hue gets there

  • UI 3:1 Move the text

    Already passes

  • UI 3:1 Move the background

    Already passes

Take it with you

--text: #2563EB;
--surface: #DBEAFE;
/* 4.23:1 · Lc +61 */

Lightness solver

Every lightness that passes

The text color at every OKLCH lightness of its own hue, measured on this background. Bands show where it reaches each target; the line is where it sits now.

Now
55%
Large text 3:1
0%–62%
Normal text AA 4.5:1
0%–53%
Normal text AAA 7:1
0%–43%

Six models

One pair, six measurements

The WCAG 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.

  • 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)1:1 – 21:1

  • 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.

    APCA-W3 0.0.98G-4gLc −108 – +106

  • Luminance modulation

    ISO 9241-3

    0.68

    Meets the 0.5 minimum

    Michelson contrast of the two luminances, with no allowance for glare. Its 0.5 minimum is where WCAG's 3:1 comes from.

    (L1 − L2) / (L1 + L2)0 – 1

  • 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's rule of thumb is 40 for 3:1 and 50 for 4.5:1; a gap of 50 can still land at 4.48:1.

    |L*1 − L*2|0 – 100

  • Color difference

    CIEDE2000

    ΔE00 38.7

    Distinct

    How different the two colors look overall: lightness, chroma and hue together. Not a readability measure: two colors can look very different and still have almost no contrast.

    ΔE00, CIE 142-20010 – 100

  • 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. For light text on a dark ground, the WCAG ratio is exactly this figure plus 1.

    (Lt − Lb) / (Lb + 0.05)−0.95 – +20

Color vision

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 checker, as each type of color vision sees it
Color visionSeen asWCAG 2APCAΔE00
Typical color vision #2563EB / #DBEAFE 4.23:1 Lc +61 38.7
Protanopia #0076F0 / #E3EAFF 3.60:1 Lc +56 36.8
Deuteranopia #0064E8 / #E0E7FE 4.27:1 Lc +61 40.7
Tritanopia #00869D / #D3EEF0 3.52:1 Lc +55 33.4
Achromatopsia #6D6D6D / #E8E8E8 4.22:1 Lc +62 35.9

Color blindness, type by type · Color blindness simulator

Type size

APCA by size and weight

The Lc each size and weight needs at APCA's bronze level. Marked cells are sizes this pair can carry.

APCA bronze level by font size and weight
Font weight · px1214161821243248
300 LightLc 90Not reachedLc 90Not reachedLc 90Not reachedLc 90Not reachedLc 90Not reachedLc 75Not reachedLc 75Not reachedLc 60Reached
400 RegularLc 90Not reachedLc 90Not reachedLc 90Not reachedLc 75Not reachedLc 75Not reachedLc 60ReachedLc 60ReachedLc 45Reached
500 MediumLc 90Not reachedLc 90Not reachedLc 90Not reachedLc 75Not reachedLc 75Not reachedLc 60ReachedLc 60ReachedLc 45Reached
600 SemiboldLc 90Not reachedLc 90Not reachedLc 90Not reachedLc 75Not reachedLc 75Not reachedLc 60ReachedLc 60ReachedLc 45Reached
700 BoldLc 90Not reachedLc 75Not reachedLc 60ReachedLc 60ReachedLc 60ReachedLc 45ReachedLc 45ReachedLc 45Reached
900 BlackLc 90Not reachedLc 75Not reachedLc 60ReachedLc 60ReachedLc 60ReachedLc 45ReachedLc 45ReachedLc 45Reached

Sizes in CSS pixels. Weights other than 400 and 700 count as the nearer of the two; under 400 is held one level stricter.

Palette audit

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.

Hex, rgb(), hsl(), oklch() 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

What the numbers mean

  • 4.5:1 — body text at Level AA. This is the number most accessibility laws and procurement contracts point at.
  • 3:1 — large text at AA, and the minimum for interface components, focus indicators and meaningful graphics.
  • 7:1 — body text at Level AAA, worth aiming for on long-form reading.
  • Large text means at least 18.66px bold or 24px regular. It is a size threshold, not a heading rule.
  • APCA Lc — a second opinion that weighs which colour is the text and how big it is. Lc 75 suits body text, 60 large or bold text, 45 headlines. It was proposed for WCAG 3, which is still a draft: meet the ratios above first. WCAG vs APCA, compared.

How this is measured, and its limits

  • The ratio is WCAG 2.2's: each colour's relative luminance from its sRGB values, then (lighter + 0.05) / (darker + 0.05). It is cut to two decimals, never rounded up, so 4.499 reads 4.49:1 and fails.
  • “Make it pass” keeps the colour's hue and chroma in OKLCH and changes only its lightness, in steps of 0.005, stopping at the first step that reaches the target. It moves the text or the background, and says so when no lightness of that hue gets there.
  • Colour vision is simulated with Machado, Oliveira and Fernandes (2009) at full severity; colour difference is CIEDE2000; the APCA score is APCA-W3 0.0.98G-4g, shown for guidance beside WCAG 2, not instead of it.
  • It compares two flat, opaque colours. Text over a photo or a gradient, hover and focus states and font smoothing all need a check of their own; a see-through colour is blended first.
  • A pass covers one pair against one success criterion, not a whole page or a conformance review. The contrast guide explains the thresholds, fixes in both directions and the hard cases.

Questions people actually ask

What contrast ratio do I actually need?

4.5:1 for body text and 3:1 for large text is WCAG 2.1 Level AA, which is the level most laws and contracts reference. AAA asks for 7:1 and 4.5:1. Interface components and meaningful graphics need 3:1 against what sits next to them.

What counts as large text?

At least 18.66px if bold, or 24px otherwise. It is a size threshold, not a heading rule — a large heading in a light weight can still fall under the body-text requirement.

Does passing the ratio mean the text is readable?

No. The WCAG 2.1 formula ignores font weight, size beyond the large-text threshold, and the way light text on dark backgrounds appears to spread. A pass is a floor, not a verdict — check the preview as well as the number.

Do disabled controls and logos have to pass?

No. WCAG 2.1 exempts inactive controls, pure decoration, text that is part of a logo, and text in a picture of something else. Everything a person has to read or operate is in scope.

Next