What this example teaches
- How normal text, large text, buttons, and disabled-looking text differ.
- Why text over images needs special review.
- Why automated contrast detection can miss CSS, gradients, image backgrounds, and state changes.
Normal text
Bad
<p style="color:#9b9b9b;background:#ffffff">Important service update</p>Light grey text on white can be hard to read.
Better
<p style="color:#2d3a33;background:#ffffff">Important service update</p>Darker text improves readability for normal body copy.
Large text
Bad
<h2 style="color:#b8a85f;background:#fff8df">Annual report</h2>Large text has a different threshold, but this pair may still be too weak.
Better
<h2 style="color:#5f4710;background:#fff8df">Annual report</h2>The foreground colour is stronger against the background.
Buttons
Bad
<button style="color:#ffffff;background:#f1c44f">Submit</button>White text on yellow often fails contrast.
Better
<button style="color:#10251f;background:#f1c44f">Submit form</button>Dark text on yellow is easier to read.
Disabled-looking text
Bad
<p class="muted">Applications close Friday.</p>Important content styled like disabled text may be too low contrast.
Better
<p class="notice">Applications close Friday.</p>Important information should remain readable and not look unavailable.
Text over hero images
Bad
<section class="hero-photo">
<h1>Book an appointment</h1>
</section>Image areas can vary, so text may be readable in one crop and unreadable in another.
Better
<section class="hero-photo">
<div class="text-scrim">
<h1>Book an appointment</h1>
</div>
</section>A tested background treatment can preserve contrast across responsive crops.
Check the actual rendered image at multiple viewport sizes. A pasted HTML scan may not detect this fully.
Placeholder text
Bad
<input placeholder="Search" style="color:#c0c0c0;background:#fff">Light placeholder text often fails contrast and disappears when the user types.
Better
<input placeholder="Search" style="color:#333;background:#fff">Stronger placeholder text remains readable while hinting at the expected value.
Link colour against surrounding text
Bad
<p>Learn more about <a href="#" style="color:#4a7c59">grants</a> and funding.</p>Green link text may not stand out enough from body text for everyone.
Better
<p>Learn more about <a href="#" style="color:#0a3d2e;font-weight:600">grants</a> and funding.</p>Stronger colour and weight make the link obvious without underlining everything.
Warning and error messages
Bad
<p style="color:#d97757;background:#fff">Your session will expire soon.</p>Orange on white can be too weak for important alerts.
Better
<p style="color:#9c2a1f;background:#fff;font-weight:600">Your session will expire soon.</p>Darker, bolder text ensures the warning is readable at a glance.
Brand colour palette issue
Bad
<button style="color:#fff;background:#f4c95f">Continue</button>White on brand yellow often fails contrast checks.
Better
<button style="color:#10251f;background:#f4c95f">Continue</button>Dark text on the same brand colour passes common thresholds.
What still needs human review
- Rendered colours after CSS, design tokens, hover states, focus states, gradients, and image overlays.
- Whether text remains readable on mobile screens, in glare, and at zoom.
- Whether disabled-looking text is actually disabled or just important low-contrast content.