Color Contrast

Contrast is one of the most common accessibility failures in production UIs because visual polish choices can accidentally reduce readability.

Why color contrast matters

People with low vision, color-vision deficiencies, or temporary visual constraints depend on strong contrast to read text and identify controls.

How color contrast works

WCAG uses contrast ratios:

• 4.5:1 for normal text at AA
• 3:1 for large text at AA
• 7:1 for normal text at AAA

Non-text elements such as focus indicators and icon buttons also require sufficient contrast.

Code examples

<!-- Low contrast text -->

<p style="color:#9ca3af;background:#ffffff">Your settings were saved.</p>

<!-- Improved contrast -->

<p style="color:#374151;background:#ffffff">Your settings were saved.</p>

button:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}