{"id":77,"date":"2025-12-08T16:11:21","date_gmt":"2025-12-09T00:11:21","guid":{"rendered":"https:\/\/robertwest.ca\/blog\/?p=77"},"modified":"2026-03-31T00:51:53","modified_gmt":"2026-03-31T08:51:53","slug":"%f0%9f%8e%a8-the-visual-barrier-how-bad-colour-contrast-is-turning-away-your-aging-customers","status":"publish","type":"post","link":"https:\/\/robertwest.ca\/blog\/2025\/12\/08\/%f0%9f%8e%a8-the-visual-barrier-how-bad-colour-contrast-is-turning-away-your-aging-customers\/","title":{"rendered":"\ud83c\udfa8 The Visual Barrier: How Bad Colour Contrast is Turning Away Your Aging Customers"},"content":{"rendered":"\n<p>Welcome back to <strong>Leads Not Liabilities<\/strong>.<\/p>\n\n\n\n<p>So far, you&#8217;ve plugged the easiest technical leaks: <a href=\"https:\/\/robertwest.ca\/blog\/2025\/11\/25\/%f0%9f%93%b8-the-easiest-fix-that-steals-your-competitors-jobs-your-alt-text-audit\/\" data-type=\"post\" data-id=\"53\">Alt-Text<\/a> for images and correct <a href=\"https:\/\/robertwest.ca\/blog\/2025\/12\/15\/%f0%9f%97%84%ef%b8%8f-organization-is-gold-why-your-headings-are-costing-you-google-rankings-the-h1-h2-h3-tricktest\/\" data-type=\"post\" data-id=\"57\">Heading Structure<\/a> (H1, H2, H3) for organization. These two fixes immediately boosted your SEO and made your site more accessible.<\/p>\n\n\n\n<p>This week, we&#8217;re talking about the simplest, most visible problem: <strong>Colour Contrast<\/strong>.<\/p>\n\n\n\n<p>If the text on your website is hard to read\u2014too light, too thin, or too close in colour to the background\u2014you are not just annoying people. You are actively shutting out the largest, fastest-growing segment of the market: <strong>older customers who need your help.<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">What is Colour Contrast?<\/h2>\n\n\n\n<p>Colour contrast is the <strong>difference in brightness<\/strong> between the text and the background it sits on.<\/p>\n\n\n\n<p>For someone with strong vision, light grey text on a white background might look &#8220;modern.&#8221; But for anyone with common age-related vision issues (like cataracts or glaucoma), or any degree of colour blindness, that text becomes <strong>invisible<\/strong>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\ud83d\udee0\ufe0f The WCAG Standard: AA Compliance is Non-Negotiable<\/h3>\n\n\n\n<p>The <strong>WCAG 2.1 Level AA<\/strong> standard is the rulebook for accessibility, and it sets a strict minimum ratio for text contrast.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Small Text:<\/strong> Must have a contrast ratio of at least <strong>4.5:1<\/strong> (e.g., black text on a white background is about 21:1, which is great).<\/li>\n\n\n\n<li><strong>Large Text:<\/strong> Can be slightly lower, but still requires a <strong>3:1<\/strong> ratio.<\/li>\n<\/ul>\n\n\n\n<p>If your site fails this check\u2014and most small trade business sites do\u2014it&#8217;s a liability you need to fix immediately.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udc75 The Leads Side: Securing the Aging Customer Base<\/h2>\n\n\n\n<p>As I mentioned before, disability rates\u2014especially vision problems\u2014increase significantly with age.<\/p>\n\n\n\n<p>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\u2019s site is the only one they can <strong>clearly read<\/strong>, guess who gets the call?<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The Age-Related Advantage:<\/strong> Fixing poor contrast is a direct investment in the long-term, high-value customer base that might need your services repeatedly\u2014the elderly.<\/li>\n\n\n\n<li><strong>The Motor Skill Problem:<\/strong> 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.<\/li>\n<\/ul>\n\n\n\n<p>You fix the visual barrier, and you secure the customer. Simple.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udee1\ufe0f The Liabilities Side: Stop the Lawsuit Exposure<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Easy Proof:<\/strong> 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.<\/li>\n\n\n\n<li><strong>The Domino Effect:<\/strong> 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.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\ud83d\udea8 Common Technical Debt: The Contrast Traps<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. The Light Grey Text Trend<\/h3>\n\n\n\n<p>Many designers use light grey or pale blue text for paragraph body copy because it looks &#8220;modern.&#8221; This is the number one contrast killer. <strong>All body text must be dark and clearly readable.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Button and Link Fails<\/h3>\n\n\n\n<p>Contrast isn&#8217;t just for paragraphs. The text on your &#8220;Request a Quote&#8221; button must have enough contrast with the button&#8217;s background colour. If your button is pale yellow and the text is white, it&#8217;s a fail.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. Text on Images<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Your Expert Blueprint for Colour Contrast<\/h3>\n\n\n\n<p><strong>I don&#8217;t do the code, but I provide the instructions.<\/strong> Instead of guessing, you need a precise audit.<\/p>\n\n\n\n<p><strong>The Action Item:<\/strong> Use a free online tool (just search &#8220;WCAG Color Contrast Checker&#8221;) and plug in the colour codes (hex codes) for your main text and background colours. <strong>Do this for your main body text and any text on coloured buttons.<\/strong><\/p>\n\n\n\n<p><strong>Here is the instruction I would include in your report for your developer:<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><strong>Developer Action:<\/strong> <strong>1.<\/strong> Review and verify that the text colour used for all body text meets the <strong>WCAG 2.1 Level AA 4.5:1<\/strong> contrast ratio against its background. <strong>2.<\/strong> Verify that text used on all buttons and navigation links also meets the 4.5:1 standard. <strong>3.<\/strong> Update all failing text and background colours to the nearest compliant value.<\/p>\n\n\n\n<p>This simple visual adjustment immediately removes a major liability and ensures your largest customer base can read your services clearly.<\/p>\n<\/blockquote>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Leads Not Liabilities: Final Action Item<\/strong><\/p>\n\n\n\n<p>Run your website\u2019s 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.<\/p>\n\n\n\n<p>Next week, I\u2019m tackling the most frustrating user failure: <strong><a href=\"https:\/\/robertwest.ca\/blog\/2025\/12\/15\/%e2%8c%a8%ef%b8%8f-the-unclickable-barrier-why-your-forms-stop-working-when-customers-need-you-most\/\" data-type=\"post\" data-id=\"80\">Keyboard Navigation<\/a><\/strong> (The fix that removes barriers for the most desperate, high-value customers).<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome back to Leads Not Liabilities. So far, you&#8217;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&#8217;re talking about the simplest, most visible problem: Colour Contrast. If the text on &#8230; <a title=\"\ud83c\udfa8 The Visual Barrier: How Bad Colour Contrast is Turning Away Your Aging Customers\" class=\"read-more\" href=\"https:\/\/robertwest.ca\/blog\/2025\/12\/08\/%f0%9f%8e%a8-the-visual-barrier-how-bad-colour-contrast-is-turning-away-your-aging-customers\/\" aria-label=\"Read more about \ud83c\udfa8 The Visual Barrier: How Bad Colour Contrast is Turning Away Your Aging Customers\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,10],"tags":[],"class_list":["post-77","post","type-post","status-publish","format-standard","hentry","category-blogpost","category-web-accessibility-for-trades"],"_links":{"self":[{"href":"https:\/\/robertwest.ca\/blog\/wp-json\/wp\/v2\/posts\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/robertwest.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/robertwest.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/robertwest.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/robertwest.ca\/blog\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":3,"href":"https:\/\/robertwest.ca\/blog\/wp-json\/wp\/v2\/posts\/77\/revisions"}],"predecessor-version":[{"id":98,"href":"https:\/\/robertwest.ca\/blog\/wp-json\/wp\/v2\/posts\/77\/revisions\/98"}],"wp:attachment":[{"href":"https:\/\/robertwest.ca\/blog\/wp-json\/wp\/v2\/media?parent=77"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/robertwest.ca\/blog\/wp-json\/wp\/v2\/categories?post=77"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/robertwest.ca\/blog\/wp-json\/wp\/v2\/tags?post=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}