Contrast Checker
Check text and background contrast against WCAG AA and AAA
- Files never leave your device
- Runs in your browser
- Free, no sign-up, no watermark
Contrast ratio
4.54:1
Passes AA for all text
- Pass
AANormal text
4.5:1
- Pass
AALarge text
3:1 · 24px+, or 18.66px+ bold
- Fail
AAANormal text
7:1
- Pass
AAALarge text
4.5:1 · 24px+, or 18.66px+ bold
- Pass
AAUI components & graphics
3:1 · Icons, borders of inputs, focus rings
APCA lightness contrast
Lc 71.6
OK for content text, not long body copy
From the WCAG 3 draft. Polarity aware: negative Lc means light text on a dark background.
Preview
Large heading
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
Body text is where low contrast hurts most: long paragraphs at small sizes tire the eyes quickly, especially on phones in sunlight.
The quick brown fox jumps over the lazy dog
Small print, captions and footnotes
ButtonButton
Nearest passing colors
AA · 4.5:1
Adjust textAlready passes
Adjust backgroundAlready passes
AAA · 7:1
Adjust text
#595959 · 7.00:1
Adjust backgroundNot reachable by changing lightness alone
Changes only lightness (in OKLCH), so the hue and feel of your color stay the same.
How to use Contrast Checker
Check a text and background color pair against WCAG 2 (AA and AAA for normal text, large text and UI components) and see the APCA lightness contrast from the WCAG 3 draft. When a pair fails, it suggests the nearest passing colors.
- 1
Enter the Text color and Background color as HEX, rgb(), hsl(), oklch() or a color name, or click a swatch to open the color picker.
- 2
Read the Contrast ratio and the Pass or Fail result for each AA and AAA check.
- 3
Look at the Preview, type your own Sample text, and use Swap colors to test the reverse.
- 4
Under Nearest passing colors, click Apply on an Adjust text or Adjust background suggestion for AA (4.5:1) or AAA (7:1).
- 5
Once you change a color, the page URL holds both colors, so you can copy it to share the result.
Frequently asked questions
What contrast ratio do I need?
WCAG AA asks for 4.5:1 for normal text and 3:1 for large text (24px and up, or 18.66px bold) and UI components such as icons and input borders. AAA asks for 7:1 and 4.5:1.
Why is 4.497:1 shown as 4.49 instead of 4.50?
The ratio is never rounded up across a threshold, so a pair that just misses 4.5:1 doesn't look as if it passes.
Can I test semi-transparent text?
Yes. Use the Text opacity slider; the translucent text is blended over the background before the ratio is measured.
What is the APCA number?
APCA comes from the WCAG 3 draft and gives a lightness contrast (Lc) that depends on which color is the text; negative values mean light text on a dark background. It is still a draft, so WCAG 2 ratios remain the usual compliance target.
How are the suggested colors chosen?
Only lightness is changed (in OKLCH), so the hue and feel of your color stay the same. If neither direction reaches the target, it says Not reachable by changing lightness alone; try adjusting the other color.