Color Contrast
Check WCAG AA and AAA contrast ratios between two colors
About Color Contrast
Compares a foreground and a background color and reports their WCAG 2.1 contrast ratio, with pass or fail badges for AA and AAA at normal and large text sizes, plus a live text sample. Colors are opaque and entered as 6-digit HEX codes or with a color picker. Useful for checking body text, buttons and links before a design review or accessibility audit.
Category: Color.
Frequently asked questions
How is the contrast ratio calculated?
▾
Each color's relative luminance is computed from its linearized sRGB channels (0.2126 R + 0.7152 G + 0.0722 B), and the ratio is (L1 + 0.05) / (L2 + 0.05), where L1 belongs to the lighter color. It ranges from 1:1 for identical colors to 21:1 for black on white, and swapping foreground and background doesn't change it.
What is the difference between AA and AAA compliance?
▾
AA (minimum): 4.5:1 for normal text, 3:1 for large text (18pt+ or 14pt+ bold). AAA (enhanced): 7:1 for normal text, 4.5:1 for large text. Most organizations target AA; AAA is ideal but often impractical for all text.
What counts as 'large text' in WCAG?
▾
Text at 18pt (24px) or larger, or 14pt (approximately 18.67px) or larger when bold. Large text has a lower contrast requirement because it is easier to read at lower contrast.
Why can a ratio shown as 4.50:1 still fail AA?
▾
The ratio is displayed with two decimals, but pass or fail uses the exact value, because WCAG doesn't allow rounding up. For example, #6363F8 on white shows 4.50:1, yet its real ratio is about 4.496, so it misses the 4.5:1 AA minimum for normal text.