CHROMA

Contrast checker

Enter a text colour and a background colour to see the WCAG 2.1 verdict and the APCA Lc together. If it fails, we suggest a fix that changes lightness only.

Large heading 24px

The quick brown fox

UI element such as a button or icon
2.95:1
Contrast ratio

WCAG 2.1 verdict

Body AA (4.5:1)FailLarge AA (3:1)FailBody AAA (7:1)FailLarge AAA (4.5:1)FailUI components (3:1)Fail

The current accessibility standard. Legal requirements almost always point here.

01 / FIX

How to reach the target

Only the lightness (L) in OKLCH moves; the hue angle stays put. You get the same colour at a different lightness rather than a different colour.

Adjust the text colour

4.50:1 · lightness moved by 10.6

Adjust the background

4.50:1 · lightness moved by 69.2

02 / APCA

APCA Lc

The candidate method for WCAG 3. It scores dark-on-light and light-on-dark differently and reports a Lc value instead of a ratio.

Lc 55.0
Dark text on a light background
Very large bold text only (36px and up)

⚠️ APCA is still a draft. Use the WCAG 2.1 verdict above when you need to claim compliance.

03 / HOW

How the numbers are calculated

WCAG 2.1 contrast comes from relative luminance. Normalise each channel to 0–1, undo the sRGB gamma, take L = 0.2126·R + 0.7152·G + 0.0722·B, then divide: (lighter L + 0.05) ÷ (darker L + 0.05). The result runs from 1:1 to 21:1.

“Large text” means 18pt (about 24px) and up, or bold text from 14pt (about 18.66px). Logotypes and disabled controls are exempt from the requirement.

Semi-transparent colours must be checked after they are composited onto what sits behind them. This tool works with two opaque colours.

04 / NAMES

CSS colour names that pass on white and on black

Every one of the 141 CSS colour names, measured against a white and a black background, sorted by whether they clear body AA (4.5:1).

05 / FAQ

Frequently asked questions

Where does 4.5:1 come from?

It is success criterion 1.4.3 in WCAG 2.1, set as the minimum at which someone with roughly 20/40 vision can read body text. The AAA level of 7:1 targets about 20/80.

WCAG and APCA disagree — which one wins?

WCAG 2.1 decides compliance. APCA is a draft that tries to fix known problems, such as WCAG being too generous on dark backgrounds, so treat it as design guidance rather than a verdict.

Can I raise contrast without changing the colour?

That is exactly what the suggestion does. It binary-searches the OKLCH lightness until the target is just cleared, keeps the hue angle, and pulls chroma in if the result would fall outside sRGB.

MORE

Next