Bad colour contrast is text or a control whose colour is too close to what sits behind it, so many visitors struggle to read it. The usual offenders are pale grey text, white on bright orange or green, placeholder hints and headlines over photos. WCAG 2.2 asks for 4.5:1 for normal text; each example below shows its ratio.
| Example | Before | After |
|---|---|---|
| Light grey body text | 2.32:1 | 7.00:1 |
| Placeholder text used as a label | 2.53:1 | 4.83:1 |
| White text on a bright orange button | 2.02:1 | 5.17:1 |
| White text on a light green badge | 2.27:1 | 5.01:1 |
| Grey text on a grey card | 3.13:1 | 6.86:1 |
| Brand blue text on a dark panel | 2.80:1 | 5.71:1 |
| White headline on a pale photo | 1.47:1 | 14.67:1 |
Updated
These are mistakes that turn up on small business sites all the time, rebuilt here with our own colours so you can see the numbers. Each one names the rule it breaks, and the editor lets you try a fix and watch the ratio change.
Choose an example, then change the fixed colours to see how far you can push your brand shade before it fails.
Example: Light grey body text, Placeholder text used as a label, White text on a bright orange button, White text on a light green badge, Grey text on a grey card, Brand blue text on a dark panel, White headline on a pale photo, A link shown by colour alone
Free delivery on orders over $50 this week.
Text colour, Background colour
Colours are checked in your browser with the WCAG 2.2 formula.
| Example | Why it fails | Fix |
|---|---|---|
| Light grey body text | Pale grey looks calm in a mockup, but on a phone in daylight it fades out. | Darken the grey to #595959, which reaches 7:1 on white. |
| Placeholder text used as a label | The hint inside an empty field is usually pale, and WCAG counts placeholder text as text that needs contrast too. | Keep a visible label above the field and darken the hint to #6B7280. |
| White text on a bright orange button | Bright mid-tones such as orange and yellow are light, so white text on them has little contrast. | Use a burnt orange such as #C2410C, or keep the bright orange and put dark text on it. |
| White text on a light green badge | Success and sale badges often use a bright green that white text cannot sit on. | Use a deeper green such as #15803D behind white text. |
| Grey text on a grey card | A grey that passes on white can fail on a tinted card, because the card is darker than the page. | Use a darker grey, such as #4B5563, on tinted surfaces. |
| Brand blue text on a dark panel | A mid blue that works on white turns muddy on charcoal: both colours sit in the middle of the brightness range. | Lighten the blue to #93C5FD on dark panels. |
| White headline on a pale photo | Text over a photo is checked against the parts of the image behind it. A light sky or a white wall leaves white text nowhere to stand out. | Put the headline on a solid or strongly darkened band, or move it off the image. |
| A link shown by colour alone | If a link differs from the sentence around it only by colour, people who cannot tell the colours apart cannot find it. | Underline links in body text. The colour can stay. |
A dark band behind the words gives white text a steady background whatever the photo shows.
<div style="position:relative;height:170px;border-radius:12px;overflow:hidden;
background:linear-gradient(135deg,#f3efe6,#d9d4c7 60%,#c8bfae);font-family:system-ui,sans-serif">
<p style="position:absolute;left:0;right:0;bottom:0;margin:0;padding:12px 16px;
background:rgba(17,24,39,0.85);color:#fff;font-size:22px;font-weight:700">
Spring menu now on
</p>
</div>Underline links inside paragraphs and give keyboard focus a clear outline.
<style>
body { font: 16px/1.5 system-ui, sans-serif; color: #111827; padding: 12px; }
p a { color: #1D4ED8; text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: 3px solid #1D4ED8; outline-offset: 2px; }
</style>
<p>Questions? See our <a href="#faq">delivery times</a> or call the shop.</p>Designs are often approved on a large, bright screen where pale text still looks crisp. The same page on an older phone with the brightness down tells a different story.
Brand colours cause the rest. A cheerful orange or lime looks great as a shape, then someone sets white text on it because white text on a brand colour is what buttons usually look like.
Success criterion 1.4.1 is separate from the ratios: it asks that colour is never the only way information is shown. Links marked only by colour, required fields marked only in red and charts told apart only by hue all break it.
Pair colour with something else: an underline, an icon, a label, a pattern.
Orange and yellow are bright colours, so their luminance is close to white. Our example orange #F5A623 gives only about 2:1 with white text.
Yes. The W3C explanation of success criterion 1.4.3 lists placeholder text among the text it covers. A visible label above the field is still the better pattern.
Measure against the part of the image directly behind the text, and assume the lightest area. The W3C names background images without enough contrast as a failure.
It is a use of colour problem under success criterion 1.4.1, which says colour must not be the only visual way to convey information. An underline solves it.
Text in inactive interface components has no contrast requirement under 1.4.3. Just be sure the button really is inactive, not only styled that way.
Related: Color contrast checker, High contrast color palettes, Accessible color palette generator, How to add a contact form.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.