Contrast Checker

The Web Content Accessibility Guidelines (WCAG) 2.1, published by the W3C, define minimum contrast ratios to ensure text is readable by people with visual impairments. The guidelines specify three conformance levels: A (minimum), AA (standard), and AAA (enhanced). For Level AA, the requirements are 4.5:1 for normal text (below 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). For Level AAA, the requirements are stricter: 7:1 for normal text and 4.5:1 for large text.

The contrast ratio is calculated using the relative luminance of the two colors. Relative luminance is a weighted sum of the linearized RGB channels: L = 0.2126*R + 0.7152*G + 0.0722*B, where R, G, and B are gamma-corrected values (each channel is linearized by applying: if c <= 0.03928 then c/12.92 else ((c+0.055)/1.055)^2.4). The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker color. The 0.05 offset accounts for ambient light flare on the screen.

These requirements are not arbitrary -- they're based on extensive research on human vision. About 8% of men and 0.5% of women have some form of color vision deficiency (color blindness). Low contrast affects not only these users but also anyone viewing a screen in bright sunlight, on a low-quality display, or at an angle. Meeting WCAG AA contrast requirements improves readability for everyone, not just users with disabilities. In many jurisdictions (EU, US ADA), WCAG compliance is a legal requirement for public-facing websites.

The most common contrast mistake is using light gray text on a white background. A common design trend uses #999 or #AAA gray text for secondary information, but these colors have contrast ratios of 2.85:1 and 2.32:1 respectively -- well below the 4.5:1 minimum. For secondary text on white, use #767676 (4.54:1) or darker. Another common issue is using brand colors that look good visually but fail contrast checks -- a brand's light blue (#00BFFF) on white has a ratio of 2.32:1, failing WCAG AA. Darken brand colors for text use or use them only for non-text elements (borders, backgrounds, icons).

For large text (headings, buttons), the 3:1 requirement is more forgiving, but don't abuse it. Large text that barely passes 3:1 is still hard to read for many users. Aim for 4.5:1 whenever possible, regardless of text size. When using colored backgrounds, test both the text color and any text that might appear on hover or focus states. CSS custom properties (variables) make it easier to maintain consistent contrast -- define your color palette with contrast-tested pairs and reuse them throughout your design system.