Check color contrast for accessibility
Compare two colors against WCAG-style contrast to keep text readable for everyone.
Text on dark · AAA · 11.6:1
Dark on light · AAA · 11.6:1
White on amber · Fails · 1.9:1
- Pick your two colors.Choose a foreground and a background — for example, body text over a panel color.
- Run the contrast check.Compare the pair with Pocket CVI's WCAG-style contrast checking.
- Read the result.See how the two colors score against each other for legibility.
- Adjust if it falls short.Tweak or swap a color, or generate an alternative, then re-check the pair.
- Save the winning pair.Keep the accessible combination in your collection so the whole team uses it.
Pro tip
Contrast-check your Primary and Background roles before you ship them into a design — fixing a low-contrast pair upstream saves a redesign later.