Color Contrast Ratio (WCAG) Calculator
Color Contrast Ratio (WCAG) Calculator
Enter a foreground (text) color and a background color as hex codes. This calculates their contrast ratio using the WCAG formula and tells you which accessibility conformance levels (AA, AAA) the combination passes.
WCAG AA — the level most legal accessibility requirements reference — requires a 4.5:1 ratio for normal text and a slightly more lenient 3:1 for large text (18pt and above, or 14pt and above when bold), while the stricter AAA level raises those thresholds to 7:1 and 4.5:1 respectively. Checking this before shipping a design is far cheaper than fixing it after an accessibility audit flags low-contrast text as a barrier for users with low vision — everything runs locally in your browser, so no color data is sent anywhere.
- Formula: Contrast Ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors, per the WCAG 2.x formula.
- WCAG thresholds: AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold); AAA requires 7:1 for normal text and 4.5:1 for large text.
- Runs entirely in your browser: your colors are calculated locally using JavaScript and never sent to a server.
What counts as "large text" for the lower AA/AAA threshold?
18pt (24px) regular weight or 14pt (~18.5px) bold or larger — large text is easier to read at lower contrast, so WCAG allows a lower ratio for it.
My colors fail WCAG AA — what should I change?
Darken the darker color, lighten the lighter color, or both — even small adjustments to lightness can significantly increase the contrast ratio without changing the overall color feel much.
Color Contrast Ratio (WCAG) Calculator
Enter a foreground (text) color and a background color as hex codes. This calculates their contrast ratio using the WCAG formula and tells you which accessibility conformance levels (AA, AAA) the combination passes.
WCAG AA — the level most legal accessibility requirements reference — requires a 4.5:1 ratio for normal text and a slightly more lenient 3:1 for large text (18pt and above, or 14pt and above when bold), while the stricter AAA level raises those thresholds to 7:1 and 4.5:1 respectively. Checking this before shipping a design is far cheaper than fixing it after an accessibility audit flags low-contrast text as a barrier for users with low vision — everything runs locally in your browser, so no color data is sent anywhere.
- Formula: Contrast Ratio = (L1 + 0.05) ÷ (L2 + 0.05), where L1 and L2 are the relative luminance of the lighter and darker colors, per the WCAG 2.x formula.
- WCAG thresholds: AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold); AAA requires 7:1 for normal text and 4.5:1 for large text.
- Runs entirely in your browser: your colors are calculated locally using JavaScript and never sent to a server.
What counts as "large text" for the lower AA/AAA threshold?
18pt (24px) regular weight or 14pt (~18.5px) bold or larger — large text is easier to read at lower contrast, so WCAG allows a lower ratio for it.
My colors fail WCAG AA — what should I change?
Darken the darker color, lighten the lighter color, or both — even small adjustments to lightness can significantly increase the contrast ratio without changing the overall color feel much.