CapyTone · tool no. 11
.
WCAG 2 ratios and APCA Lc for any two colours, with the verdicts spelled out.
Check whether text is readable on its background: the WCAG 2 contrast ratio with AA and AAA verdicts, and the APCA value beside it.
Updated · by Unfolding Dimensions
The guide
How to check colour contrast for accessibility
- Step 1
Set a text colour and a background colour.
- Step 2
Read the WCAG 2 contrast ratio with AA and AAA verdicts for normal and large text, and the APCA Lc value beside it.
- Step 3
Adjust until both pass for the size you're using.
WCAG 2 is the contrast standard most accessibility rules reference. AA requires 4.5:1 for normal text and 3:1 for large text; AAA requires 7:1 and 4.5:1.
APCA is a newer method that accounts for which colour is the text and which is the background, and tends to judge dark mode more accurately. It is a candidate for future guidelines, not yet a requirement, and the tool labels it that way.
Questions
What contrast ratio do I need?
For WCAG 2 AA: at least 4.5:1 for normal text and 3:1 for large text (about 24 px, or 19 px bold). AAA raises those to 7:1 and 4.5:1.
What is APCA?
The Accessible Perceptual Contrast Algorithm, proposed for future WCAG versions. It gives an Lc value instead of a ratio and depends on which colour is the text.
Should I use WCAG 2 or APCA?
Meet WCAG 2 where you have legal or policy requirements; it is the current standard. Use APCA as extra guidance, especially for dark themes.
Is anything stored?
No. The check runs in your browser and nothing is saved.