Six Popular UI Colours That Fail Contrast as Text
Blue, green, amber, red, violet and sky on white: their ratios, which pass AA, and the nearest shade that does.
By the TurantTools Dev team · Updated October 27, 2026 · 3 min read
Bright brand colours look great as buttons and logos, but many of them fail as text on a white background. WCAG AA needs 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold).
Six popular UI colours as text on white
| Colour | Ratio | AA normal text | AA large text | Closest that passes 4.5:1 |
|---|---|---|---|---|
| #2563eb | 5.16 | Pass | Pass | #2563eb |
| #16a34a | 3.29 | Fail | Pass | #12883e |
| #f59e0b | 2.14 | Fail | Fail | #a56a07 |
| #ef4444 | 3.76 | Fail | Pass | #eb1515 |
| #8b5cf6 | 4.23 | Fail | Pass | #8655f6 |
| #0ea5e9 | 2.77 | Fail | Fail | #0b7eb2 |
Keep the brand, fix the text
- Use the bright colour for fills, icons and big headings, and a darker shade of it for body links and small text.
- On a coloured button, check the label against the button colour, not the page: white on amber usually fails.
- Put both shades in your design tokens (for example
--brandand--brand-text) so nobody picks the wrong one.