Text contrast checker
Enter a text color and a background color to get the WCAG contrast ratio and an AA / AAA verdict. The most common accessibility slip in palette work, settled in five seconds.
Click a palette to fill the inputs with its body-text and background colors
This paragraph uses the text and background colors you picked. Make it larger or bolder and the threshold relaxes from 4.5:1 to 3:1.
This is large text
- AA · Body text (under 18px)≥ 4.5:1—
- AAA · Body text (under 18px)≥ 7:1—
- AA · Large text (18px+, or bold 14px+)≥ 3:1—
- AAA · Large text (18px+, or bold 14px+)≥ 4.5:1—
Load colors from the library
Click a palette to fill the inputs with its body-text and background colors
How WCAG contrast is calculated
WCAG 2.1 derives contrast from relative luminance: linearise each sRGB channel, weight them (red 0.2126, green 0.7152, blue 0.0722), then apply (L1 + 0.05) / (L2 + 0.05). The result runs from 1:1 to 21:1.
Body text needs 4.5:1 (AA) or 7:1 (AAA); text at 18px or above, or bold at 14px or above, relaxes to 3:1 (AA) and 4.5:1 (AAA).
Every palette in the library already passes the body-text level, so colors taken from it are safe to use.