Accessibility Color Contrast Checker

WCAG (Web Content Accessibility Guidelines) is the international standard for web accessibility, published by the W3C. Color contrast requirements ensure that people with low vision or color blindness can read text on your website. WCAG 2.1 Level AA (the most commonly required standard) mandates at least 4.5:1 contrast for normal text and 3:1 for large text (18pt+ or 14pt bold).

Large text is defined as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold text. The contrast requirement for large text is lower (3:1 for AA, 4.5:1 for AAA) because larger text is easier to read even at lower contrast ratios.

AA is the minimum standard required by most accessibility laws (including the ADA, EN 301 549, and AODA). AA requires 4.5:1 for normal text and 3:1 for large text. AAA is the enhanced standard — it requires 7:1 for normal text and 4.5:1 for large text. Most projects target AA; AAA is recommended for critical content like medical or legal information.

The WCAG formula converts hex colors to relative luminance values using the sRGB color space. Each channel (R, G, B) is linearized, then luminance L = 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter of the two luminances. This formula is standardized in WCAG 2.x and used by all major accessibility testing tools.

Use this tool's alternative suggestions to find the closest passing shade. Common fixes: darken light text colors, lighten dark text on light backgrounds, or increase font size to meet the lower large-text threshold. Also consider using Tailwind's color scale steps — moving from gray-400 to gray-600 typically adds 2-3x contrast.