color-contrastlisted

# Color contrast Sufficient contrast between text and background is what makes an interface readable for users with low vision, color blindness, or just a sunlit screen. It is one of the most common accessibility failures and one of the most checkable: the WCAG ratios are specific numbers you can verify. ## Method 1. **Meet the WCAG text-contrast ratios.** Normal text needs at least 4.5:1 against its background (AA); large text (18pt+, or 14pt+ bold) needs 3:1. AAA raises these to 7:1 and 4.5:1. These are measurable ratios, not opinions: check every text/background pair against them, including text over images and gradients (where contrast varies across the text: the hardest case). 2. **Do not rely on color alone to convey information.** Color-blind users (about 8% of men) cannot distinguish red-error from green-success if color is the only signal: pair color with an icon, text, pattern, or shape (a red X and a green check, not just red and green: see the error-signaling in accessible-forms). "Click the green button" and "required fields are red" fail without a second channel. 3. **Meet non-text contrast too.** UI components and meaningful graphics (form field borders, button edges, icons, focus indicators, chart elements) need 3:1 against adjacent colors (WCAG 1.4.11): a form input whose border barely differs from the background is invisible to low-vision users. Focus indicators especially must be clearly visible (s