Why color contrast matters
Users experience your interface in very different conditions:
Real conditions your UI must work in
- Low‑quality screens or bright sunlight
- Older eyesight, eye strain, or temporary issues
- Color vision deficiencies — difficulty distinguishing certain hues
If text and key UI elements don't have enough contrast against their backgrounds, they become:
Consequences of poor contrast
- Hard or impossible to read
- Tiring over time
- Easy to miss, especially for small labels and secondary information
Good contrast benefits everyone, not just a small subset of users. It often also makes your product feel more polished and professional.
WCAG contrast requirements in brief
WCAG 2.1 (and 2.2) define minimum contrast ratios between foreground — usually text or icons — and background. These ratios are calculated by comparing the relative luminance (perceived brightness) of the two colors.
AAA is often harder to reach across an entire product, but can be a good goal for critical content like main body text and important error messages.
What counts as foreground and background?
Whenever one color sits on top of another and conveys meaning, you should think about contrast:
Elements that need contrast testing
- Body text on page backgrounds
- Text inside buttons, inputs, chips, badges and alerts
- Icons, glyphs and status indicators
- Form borders and focus outlines when they indicate state
- Lines and shapes in charts or graphs that encode data
Purely decorative elements — background illustrations with no information — are not subject to contrast rules, but it's still wise not to make them distracting.
Examples of good and bad combinations
Too little contrast
- Light gray text (#9ca3af) on white background (#ffffff)
- Pastel green on white — #bbf7d0 on #ffffff
- Muted red on dark gray when both are mid‑brightness — e.g. #ef4444 on #1f2933
- These may look fine in a mockup but often fall far below 4.5:1 for small body text.
Better combinations
- Dark gray text (#111827) on white or off‑white backgrounds
- White text (#ffffff) on sufficiently dark brand colors — e.g. #1d4ed8 or darker
- Light neutral text (#e5e7eb) on very dark backgrounds (#020617)
Things that can trip you up
- Color on color — blue text on a green background can be hard to read even if the numeric contrast passes.
- Thin light text — white text in a very thin weight on dark backgrounds is harder to read than its contrast ratio suggests.
- Small text on noisy backgrounds — gradients, photos or patterned surfaces can hide parts of letters.
Always evaluate combinations in the sizes, weights and real layouts where they will be used — not only as isolated color swatches.
Using color beyond contrast
WCAG also warns against relying on color alone to convey information. Color should always be combined with other cues:
Avoid — color only
- ✕A form field that only turns red when invalid
- ✕A chart where red vs green is the only difference between series
- ✕Links that look exactly like body text but in a different color
Better — color + other cues
- ✓Text labels — "Error", "Success" — alongside color
- ✓Icons — ✔ ⚠ ✕ — to reinforce state
- ✓Underlines or weight differences for links
- ✓Different line styles or shapes in charts
A good test: does your design make sense in grayscale? If information disappears without color, add supporting cues.
How Colorr can help you test contrast
Colorr's named color pages and collections are useful building blocks for accessible palettes:
- 1
Pick colors from structured scales. Systems like Tailwind, Material, Radix and Chakra ship with carefully tuned lightness steps, making it easier to find pairs that meet contrast requirements.
- 2
Inspect foreground/background pairs on color pages. On a color's detail view you can inspect text examples, compare against standard neutrals (#ffffff, #111827, etc.) and copy values into your contrast checker.
- 3
Design contrast‑aware roles. For each semantic role — primary, success, warning, error, link, neutral text — choose a background shade and a text color with sufficient contrast, then verify the pair.
- 4
Experiment across themes. Colorr exposes values from light and dark‑ready palettes (Radix light/dark, Material tonal palettes), so you can verify accessible contrast in both themes.
If you're working with your own brand colors, use Colorr collections to find the closest named colors in a system like Tailwind or Radix, then rely on those systems' scales to build accessible variants.
Practical checklist for accessible color use
When finalising your palette and components, run through this checklist:
By combining WCAG contrast rules with well‑designed color collections from Colorr, you can build interfaces that are both visually appealing and accessible to a much wider range of users.