Accessible Color Pair Finder
Check WCAG contrast and fix failing pairs.
How to use
- 1 Enter or pick a foreground (text) colour and a background colour.
- 2 Choose the target level: AA large, AA normal or AAA.
- 3 Read the contrast ratio and the AA/AAA pass or fail breakdown.
- 4 If it fails, copy the suggested accessible foreground.
About Accessible Color Pair Finder
The Accessible Color Pair Finder checks whether a text colour and its background have enough contrast to be readable, using the official WCAG 2.1 algorithm.
Enter a foreground and a background as hex colours and the tool computes their contrast ratio, a number from 1 (no contrast) to 21 (pure black on pure white).
It then tells you exactly which conformance levels the pair meets: AA and AAA for normal-size text, and the more lenient AA and AAA thresholds for large text.
A live preview shows your real text on the real background so you can judge it by eye as well as by number.
The ratio is derived the correct way — each sRGB colour is linearised, converted to relative luminance with the standard 0.2126/0.7152/0.0722 weighting, and combined into the ratio formula — so the results match what auditing tools and accessibility checkers report.
When a pair falls short of your chosen target (AA large at 3, AA normal at 4.5 or AAA at 7), the finder does more than flag the problem: it searches for the nearest passing foreground by nudging your colour toward black or white until it clears the threshold, and hands you a ready hex value to copy.
Everything is computed locally in your browser, with no uploads or tracking, so you can vet brand palettes and UI states privately and fix contrast issues before they reach your users.
FAQ
What contrast ratio do I actually need?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (about 18.66px bold or 24px regular). AAA raises those to 7:1 and 4.5:1 respectively.
How is the suggested foreground chosen?
The tool blends your foreground toward black or white in small steps and returns the first colour that meets your target ratio against the same background, staying as close to your original as possible.
Does this match official accessibility checkers?
Yes. It uses the WCAG 2.1 relative luminance and contrast-ratio formulas, so the numbers line up with audit tools and browser dev-tools contrast reports.