5 min read
2026-01-27
Not just the default state, but also hover, focus, and disabled. A button with good contrast may lose it on hover.
Use icons, underlines, and patterns in addition to color. Links should differ by more than just color.
Headings, body text, image captions — each element has its own contrast requirements.
In dark themes, avoid pure white text (#fff) on black (#000) — it strains the eyes. Use light gray (#e0e0e0) on dark gray (#1a1a1a).
Integrate contrast checking into your design process. Check every new color in the Contrast Checker.
| Text | Background | Ratio |
|---|---|---|
| #000000 | #ffffff | 21:1 |
| #333333 | #ffffff | 12.63:1 |
| #ffffff | #0066cc | 5.26:1 |
| #000000 | #ffcc00 | 13.07:1 |
See also: Color Wheel, Material Design Colors