Seven Popular Colours That Fail Contrast on White, and the Darker Shades That Pass
By Mohak Mangal · Published October 26, 2026 · 7 min read
A lot of attractive UI colours turn out to be terrible for text. They look lovely as a button background or a chart bar, then you set a paragraph in the same shade and it's a strain to read. Below are seven common ones, measured on a plain white background using the WCAG formula, along with the darkest-needed fix.
The target is WCAG AA for normal text: a contrast ratio of at least 4.5:1. All of the numbers below were calculated, not eyeballed.
The results
| Colour | Original | Ratio on white | Passing shade | New ratio |
|---|---|---|---|---|
| Orange | #F57C00 | 2.70 | #B85D00 | 4.56 |
| Sky blue | #1DA1F2 | 2.83 | #167CBA | 4.54 |
| Bright green | #2ECC71 | 2.10 | #1E874B | 4.54 |
| Sunny yellow | #F1C40F | 1.66 | #8E7409 | 4.51 |
| Coral red | #E74C3C | 3.82 | #D24537 | 4.52 |
| Turquoise | #1ABC9C | 2.41 | #12856F | 4.56 |
| Light grey text | #999999 | 2.85 | #767676 | 4.54 |
Purple (#9B59B6) lands at 4.67 and already passes, which surprises people. Brightness, not hue, is what matters.
What these numbers teach
Yellow is nearly hopeless as text on white. At 1.66:1, it's closer to invisible than readable. To make it pass, you must darken it so much that it stops looking yellow at all; it becomes a mustard brown. Better to use yellow as a background with dark text on top.
The famous grey sits just below the line. #767676 is the lightest neutral grey that passes AA on white. One step lighter, #777777, drops to 4.48 and fails. That's a handy fact to keep in your head, because grey placeholder and helper text is the single most common failure on the web.
Red looks stronger than it measures. Coral red at 3.82 passes for large text (3:1) but not for body copy. A small shift darker fixes it without changing the character.
Keep the bright version where it's allowed to be bright
You don't have to throw away your palette. WCAG sets different thresholds for different jobs:
- Large text (about 24px, or 18.7px bold): 3:1. Orange at 2.70 still fails, but coral red passes.
- Icons and input borders that carry meaning: 3:1.
- Purely decorative shapes and logos: no requirement.
So a workable system has two versions of each brand colour: a vivid one for backgrounds, illustrations and big headings, and a deeper "text-safe" one for links and small type. Name them clearly, for example --orange and --orange-text, so no one grabs the wrong one.
Check the other direction too
White text on a coloured button is the opposite test. Bright green #2ECC71 with white text has the same 2.10:1 ratio and fails just as badly. The button background itself needs to be darker, or the label should switch to near-black. Contrast is symmetric: the ratio is the same whichever colour is in front.
Don't forget states and dark mode
A link may pass in its normal state and fail on hover, or when visited. Disabled controls are exempt from the rules, but making them unreadable helps nobody. And in dark mode, a colour that passes on white probably doesn't pass on charcoal. Each theme needs its own check. Our contrast checker lets you test both directions in a few seconds.
One more caveat
The ratio is a minimum, not a guarantee of comfort. Thin fonts at small sizes can be difficult even at 4.6:1. Treat it as a floor, then look at the page on a real phone in daylight. If you squint, it needs more contrast.