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

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.

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.