WCAG Colour Contrast Checker
WCAG contrast ratio with AA and AAA pass or fail.
Contrast ratio
14.63:1
- AA · normal text (≥ 4.5:1)Pass
- AA · large text (≥ 3:1)Pass
- AAA · normal text (≥ 7:1)Pass
- AAA · large text (≥ 4.5:1)Pass
- AA · UI components and graphics (≥ 3:1)Pass
Large text, 24px regular
Large text, 18.66px bold
Normal body text at 16px. The quick brown fox jumps over the lazy dog, and the rest of this sentence is here so you can judge readability.
Small print at 14px.
Use via API
WCAG contrast ratio between two colours, with AA and AAA results. Send JSON, get JSON back.
POST https://pithlab.com/api/v1/tools/contrast-checker
curl https://pithlab.com/api/v1/tools/contrast-checker \
-H "Authorization: Bearer $PITHLAB_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#767676","background":"#ffffff"}'About the Contrast Checker
Check the contrast ratio between text and background colours against WCAG 2.x AA and AAA for normal and large text, with a live preview of both.
How to use the Contrast Checker
- Enter the text (foreground) colour and the background colour in HEX, RGB, HSL or HSV, or use the pickers.
- Read the contrast ratio, from 1:1 (no contrast) to 21:1 (black on white).
- Check the AA and AAA results for normal and large text, and use Swap to try the colours the other way round.
Examples
Input
#777 on #fff
Output
4.48:1, fails AA for normal text, passes for large text
Input
#767676 on #fff
Output
4.54:1, passes AA
Input
#ffff66 on #ffffff
Output
1.06:1, fails AA
Frequently asked questions
What contrast ratio do I need?
WCAG 2.x level AA requires at least 4.5:1 for normal text and 3:1 for large text. Level AAA requires 7:1 for normal text and 4.5:1 for large text. Icons, form borders and other UI components need 3:1 under AA.
What counts as large text?
At least 24px (18pt) at regular weight, or at least 18.66px (14pt) when bold.
Why does 4.48:1 fail when it rounds to 4.5?
WCAG thresholds are exact minimums and must not be rounded. A ratio of 4.48:1 is below 4.5:1, so it fails AA for normal text even though it looks close.
How is the ratio calculated?
Each colour's relative luminance is computed from its linearised sRGB channels (0.2126 R + 0.7152 G + 0.0722 B). The ratio is (lighter + 0.05) ÷ (darker + 0.05).
What about transparent colours?
A translucent text colour is blended onto the background before measuring. A translucent background is assumed to sit on white, which the tool points out because the real result depends on what is underneath.