Color Contrast Checker
Check text and background colors against WCAG 2.1 AA & AAA accessibility standards
Colors
21:1
Contrast Ratio
AA · Normal text
AA · Large text
AAA · Normal text
AAA · Large text
UI · Graphics (3:1)
Live Preview
Large text sample — 24px bold
Normal body text sample. The quick brown fox jumps over the lazy dog. 0123456789.
FAQ
What contrast ratio do I need to pass WCAG?
WCAG 2.1 AA requires at least 4.5:1 for normal text and 3:1 for large text (18pt regular or 14pt bold and above). The stricter AAA level requires 7:1 for normal text and 4.5:1 for large text. UI components and graphics need at least 3:1.
What counts as large text?
Large text is 18pt (about 24px) or larger for regular weight, or 14pt (about 18.66px) or larger for bold. Large text has a lower contrast requirement because bigger letters are easier to read.
How is contrast ratio calculated?
The ratio compares the relative luminance of the two colors using the formula (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker. Ratios range from 1:1 (no contrast) to 21:1 (black on white).
Does this work for color blindness?
Contrast ratio measures luminance difference, which helps many users including those with low vision. However it does not fully cover color blindness, so avoid relying on color alone to convey meaning.
Advertisement (AdSense)