โ FAQ โ Contrast Checker
What is WCAG and why does contrast matter?
WCAG (Web Content Accessibility Guidelines) is an international standard for making web content accessible to people with disabilities, including those with low vision, color blindness, or aging-related vision loss. Color contrast is critical because insufficient contrast makes text hard or impossible to read for many users. WCAG 2.1 specifies minimum contrast ratios โ 4.5:1 for normal text (Level AA) and 7:1 for enhanced accessibility (Level AAA).
What contrast ratio do I need to pass WCAG AA?
For WCAG AA compliance: normal text (under 18px regular or 14px bold) needs a 4.5:1 ratio. Large text (18px+ regular or 14px+ bold) needs 3:1. UI components like buttons, form inputs and icons also need 3:1. Most websites aim for AA compliance at minimum. Government sites and enterprise applications often require AAA (7:1 for normal text, 4.5:1 for large text).
How is contrast ratio calculated?
Contrast ratio is calculated from the relative luminance of the two colors. Luminance converts sRGB color values to linear light, weighted for human perception (green contributes most, blue least). The ratio formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color's luminance. The result ranges from 1:1 (identical colors, no contrast) to 21:1 (black on white, maximum contrast).