# Check color contrast in the actual interface states

Check contrast where colors are actually used, including hover, focus, error, and selected states. A palette can contain accessible combinations and still be applied poorly. Text over imagery or gradients needs checking against the background behind the text, not a convenient average color.

## Start with the important reading paths
Inspect body text, labels, help messages, prices, and errors. W3C’s contrast-minimum guidance describes the text thresholds and exceptions. Normal text generally needs a 4.5:1 ratio, while qualifying large text uses 3:1. Do not assume a heading qualifies solely because it is semantically an h2; its rendered size and weight matter.

## A fictional audit table
| Element | State | Concern |
| --- | --- | --- |
| Help text | Default | Pale gray on cream |
| Button text | Hover | Background changes but text does not |
| Search label | Filled | Label becomes smaller and lighter |
| Error | Error | Red text sits on tinted red background |

Record the actual computed colors and measured ratio using a suitable contrast tool. A screenshot can guide inspection but may not reproduce the underlying color values reliably.

## Keep focus and controls in the review
Text contrast is not the whole accessibility requirement. Boundaries, meaningful icons, and focus indicators need their own checks under the relevant guidance. An icon-only button also needs an accessible name; a high-contrast icon does not explain the action by itself.

```text
Audit these actual interface states for contrast concerns.
Separate text, controls, focus indicators, and decorative elements.
Use computed colors and stated measurements where available.
Do not claim compliance from the palette alone.
States, colors, sizes, and observations: [paste]
```

## Recheck after the fix
Changing one color can affect multiple states. Verify the default, hover, selected, error, and disabled paths that use it. Keep text over decorative artwork on a solid readable surface if the image varies too much for a reliable contrast check.

Automated checks help identify issues, but inspect the reading experience too. Passing one contrast test does not establish full accessibility, and decorative color choices should not obscure the information people need to complete the task.

---
SkillStall · 2026-10-02
W3C: Contrast minimum: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html