Contrast Checker
Check text and background colours against WCAG AA and AAA — ratio, pass/fail for every size, and a one-click fix.
Large text — 24px regular or 19px bold
Normal body text at 16px. The quick brown fox jumps over the lazy dog, 0123456789.
UI component
How to Use Contrast Checker in 3 Steps
Enter both colours
Text colour and background — any CSS colour string or the picker. The sample on the right repaints instantly.
Read the verdict
The ratio is shown big, with pass/fail badges for AA and AAA at normal text, large text and UI component thresholds (4.5:1, 3:1, 7:1).
Apply the fix
If it fails, a nearest passing colour is suggested — same hue, lightness nudged until it meets the target in Settings. Press Use this to apply it.
Contrast Checker — Frequently Asked Questions
What do the thresholds mean?
WCAG 2.2: normal text needs 4.5:1 for AA and 7:1 for AAA; large text (≥24px, or ≥19px bold) needs 3:1 for AA and 4.5:1 for AAA; non-text UI parts such as input borders and icons need 3:1. The ratio is computed from relative luminance exactly as the spec defines.
Does semi-transparent text work?
Yes. A text colour with alpha is composited over the background first, then measured — the same thing your screen does. Transparent backgrounds are composited over white.
How is the fix colour chosen?
The hue and saturation stay the same; lightness is moved step by step away from the background until the target ratio is met. It is the smallest change that passes, not necessarily the prettiest — treat it as a starting point.
Is passing AA enough?
AA is the legal baseline in most jurisdictions. AAA is recommended for body text people read for long stretches. Also remember contrast is only one check — colour should never be the only way information is conveyed.
Is my input sent anywhere?
No. Everything is computed by JavaScript in your browser tab. Nothing is uploaded, logged or stored by Toolity.