Color Contrast Checker (WCAG)
Check the WCAG contrast ratio between a text color and a background color, with AA and AAA pass or fail for normal and large text.
Calculator by Toolsloft ↗The quick brown fox jumps over the lazy dog.
- Contrast ratio
- 17.40 : 1
AA normal PassAA large PassAAA normal PassAAA large Pass
Check whether two colors have enough contrast to be readable and accessible. Enter a text color and a background color to get the WCAG contrast ratio plus a clear pass or fail for AA and AAA at both normal and large text sizes. Handy for picking button, link, and body-text colors that everyone can read.
How this is calculated
The ratio is computed with the WCAG 2.1 method: each color is converted from sRGB to relative luminance, then the ratio is (L1 + 0.05) / (L2 + 0.05) with L1 the lighter color. AA needs 4.5 for normal text and 3 for large text; AAA needs 7 and 4.5. Large text means about 18pt, or 14pt bold.
How to use
- Enter the text (foreground) color as a hex value like #1a1a1a.
- Enter the background color as a hex value like #ffffff.
- Read the contrast ratio and the AA and AAA pass or fail results.
Examples
- Black on white:
#000000 on #ffffff = 21:1 - Mid gray on white:
#777777 on #ffffff = 4.48:1
FAQ
- What contrast ratio do I need to pass WCAG?
- For normal text, AA requires a ratio of at least 4.5 to 1 and AAA requires 7 to 1. For large text (about 18pt, or 14pt bold), AA requires 3 to 1 and AAA requires 4.5 to 1.
- What counts as large text?
- WCAG treats text as large when it is at least 18pt (24px) regular, or 14pt (about 18.66px) bold. Large text is allowed a lower contrast ratio because bigger letters are easier to read.
- Does the ratio depend on which color is the text?
- No. The contrast ratio is the same whether a color is used for the text or the background, because the formula always puts the lighter color on top.