Color Contrast Checker
Check WCAG accessibility contrast ratios between colors.
Normal text sample (16px) — The quick brown fox jumps over the lazy dog.
Large text sample (24px)
Bold large text (18px bold)
WCAG AA
WCAG AAA
Frequently Asked Questions
What are the WCAG contrast ratio requirements?
WCAG 2.1 defines two conformance levels: AA requires 4.5:1 for normal text and 3:1 for large text (18px+ bold or 24px+ regular). AAA requires 7:1 for normal text and 4.5:1 for large text. These ratios ensure text is readable for users with moderate to severe vision impairments.
How is the contrast ratio calculated?
Contrast ratio is calculated using the relative luminance of both colors. The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance. Luminance is derived from linear RGB values using the sRGB specification. The resulting ratio ranges from 1:1 (identical colors) to 21:1 (black on white).
What counts as "large text" for accessibility?
WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (18.66px) or larger for bold weight (700+). Large text has a lower contrast requirement (3:1 for AA) because bigger letters are inherently easier to read. The tool checks both normal and large text thresholds.
Why does my design fail contrast requirements?
Light gray text on white backgrounds and low-saturation colors on similar backgrounds are the most common failures. Increasing the darkness of text or increasing the lightness of backgrounds improves contrast. The tool suggests the nearest passing color if your combination fails, making it easy to fix.
Does contrast matter for non-text elements?
Yes — WCAG 2.1 requires 3:1 contrast for UI components and graphical objects (buttons, icons, form borders, chart elements). This applies to any visual element that conveys information. The tool checks this "non-text contrast" threshold separately from text requirements.