Color contrast checker
Make sure your text is easy to read for everyone, and get a fix when it isn’t.
Sealed on this device
Runs in your browser. Nothing is uploaded.
Sealed
Colors
- Contrast ratio
- Normal text
- AA · 4.5:1
- AAA · 7:1
- Large text
- AA · 3:1
- AAA · 4.5:1
- Interface elements and icons
- AA · 3:1
- APCA contrast (for information)
APCA is a newer method being studied for future accessibility guidelines. WCAG 2.2 remains the reference today.
Preview
Large text reads like this
Normal text should stay easy to read for everyone, including people with low vision, on a phone in bright sunlight or on an old screen.
Small print and captions need the most contrast.
Suggested fixes
How it works
-
Enter your two colors
Type or pick the text color and the background color. Any format works: HEX, RGB, HSL or a CSS name.
-
Read the result
See the contrast ratio and whether it passes WCAG 2.2 AA and AAA for normal text, large text and interface elements.
-
Apply a fix if needed
If a level fails, use one of the suggested colors: it’s the closest one, with the same hue, that passes.
Frequently asked questions
What contrast ratio do I need?
WCAG 2.2 level AA asks for at least 4.5:1 for normal text and 3:1 for large text. Level AAA asks for 7:1 and 4.5:1. Icons, input borders and other interface elements need at least 3:1 against what’s next to them.
What counts as large text?
Text of at least 18 points (24 CSS pixels), or at least 14 points (about 18.7 CSS pixels) when it’s bold. Everything smaller is normal text.
Why does 4.49:1 fail when it’s so close to 4.5:1?
WCAG thresholds are strict minimums and the ratio must not be rounded up. That’s why this checker shows the ratio rounded down: a value that looks like a pass really is one.
What is APCA?
APCA (Accessible Perceptual Contrast Algorithm) is a newer way of measuring contrast that takes into account whether text is dark on light or light on dark. It’s being studied for a future version of the guidelines. It’s shown here for information only: today, legal and audit requirements refer to the WCAG 2 ratio.
How are the suggested colors chosen?
The checker keeps the hue and colorfulness of your color and only changes its lightness, in the perceptual OKLCH color space, until it finds the closest value that reaches the level. Your color still looks like itself, just a little lighter or darker.
Does it work with transparent colors?
Yes for the text color: a semi-transparent text color is blended with the background first, because that’s the color people actually see. The background is treated as solid.