Design tools
Readable text, proven
Enter a text and a background colour to see the WCAG 2 ratio, AA and AAA results and the APCA score — and the closest colour that passes.
Not a colour — try #336699, rgb(), hsl() or oklch().
Not a colour — try #336699, rgb(), hsl() or oklch().
About this tool
Both contrast methods, and a fix
WCAG 2’s contrast ratio is what accessibility law and audits measure today; APCA is the newer method proposed for WCAG 3, which accounts for font size and weight and for light text on dark backgrounds far better. This checks both at once, shows the text at real sizes on your colours, and when a pair fails, suggests the nearest colour — same hue, adjusted lightness — that passes the level you need.
- Free, no sign-up
- Runs in your browser
- Nothing uploaded
WCAG 2.2 and APCA
The ratio and AA/AAA results for normal and large text, plus the APCA Lc value and what it allows.
The nearest pass
A failing pair gets suggestions that keep your hue and only shift lightness, for text or background.
Seen at real sizes
A live sample at body, large and bold sizes, so the numbers match what you see.
Step by step
How to check colour contrast
Enter your colours
Type or pick the text colour and background colour — HEX, RGB, HSL or OKLCH.
Read the results
See the WCAG 2 ratio with AA and AAA results, and the APCA score.
Fix a failure
Apply a suggested colour that passes, or swap text and background.
Get the most out of it
Tips for the best results
- AA is the usual target4.5:1 for normal text and 3:1 for large text (24 px, or 19 px bold) is what most audits require.
- Check placeholder textGrey placeholder and disabled text are the commonest failures.
- Dark mode differsLight text on dark backgrounds often needs more contrast than the WCAG 2 ratio suggests — APCA shows this.
- Icons count tooMeaningful icons and borders need 3:1 against their background.
Keep going
More free design tools
Questions
Questions about this tool
Everything here runs in your browser — nothing you add is uploaded. More in the general FAQ.
What contrast ratio does WCAG require?
Level AA needs 4.5:1 for normal text and 3:1 for large text (at least 24 px, or 18.66 px bold). Level AAA needs 7:1 and 4.5:1. User-interface parts and meaningful graphics need 3:1.
What is APCA?
The Accessible Perceptual Contrast Algorithm, proposed for WCAG 3. It gives a lightness contrast value (Lc) that depends on which colour is the text, and maps it to minimum font sizes. It is more accurate than the WCAG 2 ratio, especially for dark mode.
Should I use WCAG 2 or APCA?
Use WCAG 2 for compliance — it is what current law and audits test. Use APCA as a second opinion for readability, especially for light-on-dark text and thin fonts.
How do I fix a colour that fails?
Use a suggested colour: the checker keeps your hue and adjusts lightness to the nearest value that passes AA or AAA.
Is anything sent anywhere?
No. The calculations run in your browser.