Color Contrast Checker

Web accessibility requires sufficient contrast between text and its background so people with low vision or color vision deficiencies can read it. The WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios — failing these standards means your site is inaccessible to a significant portion of users. How to check contrast: 1. Enter your foreground (text) color and background color as HEX codes or use the color pickers. 2. The contrast ratio is calculated instantly. 3. WCAG compliance levels are shown. WCAG contrast requirements: Normal text (below 18pt / 14pt bold): WCAG AA (minimum): 4.5:1 ratio required. WCAG AAA (enhanced): 7:1 ratio required. Large text (18pt+ / 14pt+ bold): WCAG AA: 3:1 ratio required. WCAG AAA: 4.5:1 ratio required. Non-text UI components (buttons, icons, input borders): WCAG AA: 3:1 ratio against adjacent colors. How contrast ratio is calculated: Contrast ratio = (L1 + 0.05) / (L2 + 0.05) Where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. Luminance uses the WCAG formula which accounts for how human eyes perceive different colors (green appears brighter than blue at the same numeric value). Suggested alternatives: When a color pair fails, the tool suggests adjusted colors that pass — darker text on light backgrounds or lighter text on dark backgrounds — preserving your brand colors while meeting accessibility requirements.