WCAG Color Contrast Checker
Check the contrast ratio of a text and background colour against WCAG 2.2 AA and AAA for body text, large text and interface elements, with a preview.
Free · No sign-up · Your inputs stay in your browser
Input
Check colour contrast against WCAG
Output
7.58 : 1
Large text, 24px
Body text at 16px. The quick brown fox jumps over the lazy dog.
| Use | Needs | AA / AAA |
|---|---|---|
| Body text | 4.5 / 7 | Pass / Pass |
| Large text | 3 / 4.5 | Pass / Pass |
| Icons, borders, focus rings | 3 | Pass |
WCAG 2.2 success criteria 1.4.3 and 1.4.6 for text and 1.4.11 for interface parts. Large text is 24px, or 18.66px bold. The ratio ignores alpha: for a translucent colour, check the colour it actually renders as on its background.
Runs in this browser. Nothing you paste is sent to a server.
About this tool
Method, assumptions, practical next steps, and limits.
The thresholds
WCAG 2.2 success criterion 1.4.3 asks for 4.5:1 for body text and 3:1 for large text, meaning 24px or 18.66px bold. 1.4.6 raises them to 7:1 and 4.5:1 for AAA. 1.4.11 asks 3:1 for the boundaries of controls and for meaningful graphics. Light grey placeholder text and thin grey borders on white are the usual failures.
Limits of the formula
The WCAG 2 formula is known to overrate contrast for some dark colour pairs and underrate it for light text on mid-tones; the APCA method proposed for WCAG 3 models perception better. WCAG 2 remains the standard that accessibility law and audits refer to, so it is the one to pass.
