About the contrast checker
The ratio compares the relative luminance of the two colours, which is not the same as how bright they look. Each channel is linearised through the sRGB curve before being weighted, and green counts for far more than blue - which is why yellow on white fails badly and blue on white often passes.
The thresholds are 4.5:1 for normal text and 3:1 for large text at AA, rising to 7:1 and 4.5:1 at AAA. Interface components - icons, borders, focus rings, form outlines - need 3:1 under SC 1.4.11, which is the requirement most often missed.
Frequently asked questions
- Is anything I enter sent to a server?
- No. Every calculation runs inside your browser, and nothing you type or pick is uploaded, stored or logged. The page keeps working with the network disconnected.
- What counts as large text?
- 18.66px and bold, or 24px at any weight. Those exact numbers matter: a designer who reads 'passes for large text' and applies it to 20px regular has a failure, because 20px regular is normal text.
- Why does my colour pass here and fail elsewhere?
- Usually because the other tool skipped the linearisation step, or rounded the ratio up. The figure here follows the WCAG formula exactly and rounds to two places, so a value shown as 4.5 has genuinely met the threshold.
- Does contrast alone make a design accessible?
- No. It is one requirement of several - text must also be resizable, focus must be visible, and colour must never be the only way information is conveyed. A passing ratio on unreadable text is still unreadable text.
- What about transparency?
- A colour with alpha is compared as written, but what a reader actually sees is the blend with whatever is behind it. Check the composited colour rather than the transparent one.
Related web tools
How your data is handled
Everything happens on your device. There is no upload, no storage and no logging. Closing the tab clears everything you entered.