What is the difference between AA and AAA?

AA is the level most laws and procurement rules point to, including the European Accessibility Act, ADA case law and Section 508. AAA asks for 7:1 on normal text and 4.5:1 on large text. It is a good target for long reading, but few brand palettes reach it everywhere.

What is APCA and should I use it?

APCA (Accessible Perceptual Contrast Algorithm) is the newer contrast model being developed for WCAG 3. It accounts for font weight and size and treats dark-on-light differently from light-on-dark, which WCAG 2 does not. Use WCAG 2.2 for compliance today and read APCA as a second opinion, especially for dark mode.

Why does white text on my orange button fail?

Bright, warm colours such as orange, yellow and light green have high luminance, so white text on them has little contrast even when it looks punchy. Either darken the button by about 10–15% lightness, or use near-black text on it.

Does contrast apply to placeholder and disabled text?

Placeholder text counts as text and should reach 4.5:1. Truly disabled controls are exempt from WCAG contrast requirements, but they still need to be recognisable as controls.

Is my data sent anywhere?

No. All the maths runs in your browser. The only place your colours go is the page URL, so you can share or bookmark a check.

Color contrast checker

Check any text and background colour against WCAG 2.2 and APCA. See exactly what passes, preview it on real UI, and get the nearest colour that fixes a fail without losing your brand hue.

Free, no signup
Runs in your browser
Nothing is uploaded

Colours

Type a hex or use the picker.

Text

Background

Text lightness (OKLCH)48%

Try a pair

Fix it

The closest colour to yours that passes, same hue.

Passes AA

#5c5e63

Passes AAA

#56585d

Result

Contrast ratio

6.48:1

Good

APCA Lc 82.2

Fine for body text (16px+)

AA · normal textneeds 4.5:1Pass
AA · large textneeds 3:1Pass
AAA · normal textneeds 7:1Fail
AAA · large textneeds 4.5:1Pass
UI & iconsneeds 3:1Pass

Live preview

Your colours on real interface text.

Large text · 24px

The quick brown fox jumps over the lazy dog.

Body text at 16px. Good contrast lets everyone read your interface — in sunlight, on a cheap screen, or with low vision.

Small print at 13px is where weak contrast hurts first.

Primary buttonOutline buttonA text link

How it works

How to use the color contrast checker

Enter your two colours

Type or pick the text colour and the background colour. Hex with or without the #, three or six digits.

Read the ratio

The contrast ratio updates live, with a pass or fail for WCAG 2.2 AA, AAA and non-text UI, plus an APCA Lc score.

Fix what fails

Drag the lightness slider, or press Use on the nearest passing colour — it keeps your hue, so the brand still reads.

Share the result

The colours live in the URL. Press Share to send the exact check to a designer, developer or client.

What a contrast ratio measures

Contrast ratio compares the relative luminance of two colours, how bright each looks to the human eye once the screen's gamma is accounted for. The scale runs from 1:1 (identical colours) to 21:1 (pure black on pure white). WCAG uses it because luminance difference, not hue, is what lets people with low vision or colour-blindness tell text apart from its background.

That is why two colours can look very different and still fail. Red text on a green background, for example, can have almost the same luminance and become unreadable for the roughly 1 in 12 men with red-green colour blindness.

The WCAG 2.2 thresholds, in one table

What you are checking	AA	AAA
Body text (under 24px, or under ~18.7px bold)	4.5:1	7:1
Large text (24px+, or ~18.7px+ bold)	3:1	4.5:1
Icons, input borders, focus rings, chart lines	3:1	—
Logos and purely decorative elements	Exempt	Exempt

Fixing contrast without wrecking the brand

Most contrast fails come from mid-tone greys on white and from white text on bright brand colours. The fix is almost always a change in lightness, not hue. This checker adjusts lightness in OKLCH, a colour space where equal steps look equally different. Your blue stays blue, just darker or lighter.

Grey body text: on white, #767676 is the lightest neutral grey that passes AA. Anything paler is decoration, not copy.
Bright buttons: keep the bright colour for large surfaces and illustrations, and ship a darker shade for buttons that carry white labels.
Dark mode: pure white on pure black can glare. Off-white on near-black, such as #f4f1ec on #141312, still clears AAA and is calmer to read.

Building a full palette? Generate accessible shades with the Tailwind colour scale generator, then check each text pair here.

WCAG 2 vs APCA: which number to trust

WCAG 2's formula is legally referenced and simple, but it over-rates some dark colour pairs and under-rates others. APCA, the candidate method for WCAG 3, is perceptually more accurate and scales the requirement with font size and weight. A sensible 2026 workflow is to meet WCAG 2.2 AA for complianceand use APCA's Lc to catch pairs that technically pass but read poorly. Lc 75+ is comfortable for body text, Lc 60 is the floor for larger content text.

Common questions