WCAG Contrast Checker

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable for people with low vision or color blindness. The contrast ratio is calculated from the relative luminance of the foreground and background colors, ranging from 1:1 (identical) to 21:1 (black on white). The formula is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter luminance.

WCAG 2.1 defines two levels: AA is the legal standard required by most accessibility laws (ADA, EN 301 549, AODA). It requires 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced level — 7:1 for normal text and 4.5:1 for large text. AAA is aspirational; most organizations target AA as the minimum baseline.

Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. Large text has a lower contrast requirement (3:1 for AA, 4.5:1 for AAA) because it's inherently easier to read at lower contrast than small text.

No. WCAG contrast requirements apply to text and images of text. Decorative elements, logos, and disabled UI components are exempt. However, UI components like buttons, inputs, and focus indicators do need to meet 3:1 contrast against adjacent colors under WCAG 2.1 Success Criterion 1.4.11 (Non-text Contrast).

To increase contrast: darken the text color, lighten the background (or vice versa), or increase the font size to qualify as 'large text'. Tools like oklch color space allow you to adjust lightness while preserving hue. A good rule: if you're targeting AA compliance, aim for at least 5:1 to have a safety buffer when rendering varies.