Meet minimum color contrast ratios

Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Low contrast text is also difficult for users with low vision, aging eyesight, or those reading in bright sunlight. Insufficient contrast is one of the most common WCAG failures and directly prevents users from reading content they need.

Quick Reference

• Normal text (< 18pt or < 14pt bold): minimum contrast ratio of 4.5:1 — WCAG 2.1 SC 1.4.3 Level AA
• Large text (≥ 18pt / 24px, or ≥ 14pt bold / ~18.67px bold): minimum 3:1 contrast ratio
• Non-text UI components (icons, focus indicators, input borders): minimum 3:1 against adjacent color — WCAG 2.1 SC 1.4.11 Level AA
• WCAG 2.1 SC 1.4.6 (Level AAA) requires 7:1 for normal text and 4.5:1 for large text
• Decorative text and logotypes are exempt from contrast requirements

Check

Evaluate the contrast ratio between text color and its background for all text on the page. Use the WCAG relative luminance formula: for normal text (< 18pt or < 14pt bold), the ratio must be ≥ 4.5:1; for large text (≥ 18pt or ≥ 14pt bold), the ratio must be ≥ 3:1. Also check non-text UI components (input borders, button outlines, icons) for ≥ 3:1 ratio against adjacent colors per WCAG 2.1 SC 1.4.11. Check all interactive states: default, hover, focus, active, and visited.

Fix

Darken the foreground color or lighten/darken the background color until the ratio meets the minimum. For normal text failing 4.5:1: increase text darkness or background lightness. For large text failing 3:1: apply same approach with a lower threshold. Use a contrast checker tool (WebAIM, browser DevTools accessibility panel) to verify the exact ratio. Do not use opacity to lighten text — compute the effective blended color and check that ratio instead.