Welcome back to Leads Not Liabilities.
So far, you’ve plugged the easiest technical leaks: Alt-Text for images and correct Heading Structure (H1, H2, H3) for organization. These two fixes immediately boosted your SEO and made your site more accessible.
This week, we’re talking about the simplest, most visible problem: Colour Contrast.
If the text on your website is hard to read—too light, too thin, or too close in colour to the background—you are not just annoying people. You are actively shutting out the largest, fastest-growing segment of the market: older customers who need your help.
What is Colour Contrast?
Colour contrast is the difference in brightness between the text and the background it sits on.
For someone with strong vision, light grey text on a white background might look “modern.” But for anyone with common age-related vision issues (like cataracts or glaucoma), or any degree of colour blindness, that text becomes invisible.
🛠️ The WCAG Standard: AA Compliance is Non-Negotiable
The WCAG 2.1 Level AA standard is the rulebook for accessibility, and it sets a strict minimum ratio for text contrast.
- Small Text: Must have a contrast ratio of at least 4.5:1 (e.g., black text on a white background is about 21:1, which is great).
- Large Text: Can be slightly lower, but still requires a 3:1 ratio.
If your site fails this check—and most small trade business sites do—it’s a liability you need to fix immediately.
👵 The Leads Side: Securing the Aging Customer Base
As I mentioned before, disability rates—especially vision problems—increase significantly with age.
If you are struggling to find a text-based contact form, a customer over 65 is likely struggling even more. They are trying to find a reliable plumber or electrician, and if your competitor’s site is the only one they can clearly read, guess who gets the call?
- The Age-Related Advantage: Fixing poor contrast is a direct investment in the long-term, high-value customer base that might need your services repeatedly—the elderly.
- The Motor Skill Problem: If text is hard to read, customers might click the wrong link or button (which can also be a motor-control precision issue). Clear, high-contrast text reduces confusion and errors, leading to a successful quote request.
You fix the visual barrier, and you secure the customer. Simple.
🛡️ The Liabilities Side: Stop the Lawsuit Exposure
Poor colour contrast is one of the easiest issues for an accessibility auditor or lawyer to find and prove. There are free online tools that instantly scan a website and flag every single contrast failure.
- Easy Proof: Unlike complex navigation issues, contrast is a quantifiable failure. If your ratio is 4.4:1 instead of 4.5:1, you are in violation of WCAG 2.1 AA.
- The Domino Effect: A lawyer looking for a lawsuit against a private business will check for the easiest failures first. Colour contrast is often at the top of that list. Fixing it is a cheap defense.
🚨 Common Technical Debt: The Contrast Traps
1. The Light Grey Text Trend
Many designers use light grey or pale blue text for paragraph body copy because it looks “modern.” This is the number one contrast killer. All body text must be dark and clearly readable.
2. Button and Link Fails
Contrast isn’t just for paragraphs. The text on your “Request a Quote” button must have enough contrast with the button’s background colour. If your button is pale yellow and the text is white, it’s a fail.
3. Text on Images
If you put text over a photo (e.g., in a banner graphic), the background behind the text must be dark enough or light enough to guarantee the 4.5:1 ratio, often requiring a transparent layer between the image and the text.
Your Expert Blueprint for Colour Contrast
I don’t do the code, but I provide the instructions. Instead of guessing, you need a precise audit.
The Action Item: Use a free online tool (just search “WCAG Color Contrast Checker”) and plug in the colour codes (hex codes) for your main text and background colours. Do this for your main body text and any text on coloured buttons.
Here is the instruction I would include in your report for your developer:
Developer Action: 1. Review and verify that the text colour used for all body text meets the WCAG 2.1 Level AA 4.5:1 contrast ratio against its background. 2. Verify that text used on all buttons and navigation links also meets the 4.5:1 standard. 3. Update all failing text and background colours to the nearest compliant value.
This simple visual adjustment immediately removes a major liability and ensures your largest customer base can read your services clearly.
Leads Not Liabilities: Final Action Item
Run your website’s main text colours through a contrast checker right now. If your primary paragraph text is not a dark grey or black against a pure white background, you are likely failing the test. Send the results to your developer with the instruction to fix the ratio immediately.
Next week, I’m tackling the most frustrating user failure: Keyboard Navigation (The fix that removes barriers for the most desperate, high-value customers).