# Color Contrast

> Canonical HTML version: https://rocketvalidator.com/glossary/color-contrast
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Color contrast is the luminance difference between foreground and background colors, measured as a ratio, used to determine whether text and UI components are readable for users with low vision.

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

```html
<!-- Low contrast text -->
<p style="color:#9ca3af;background:#ffffff">Your settings were saved.</p>
```

```html
<!-- Improved contrast -->
<p style="color:#374151;background:#ffffff">Your settings were saved.</p>
```

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