{"id":2374,"date":"2025-04-23T07:43:44","date_gmt":"2025-04-23T06:43:44","guid":{"rendered":"https:\/\/www.forestsoftware.co.uk\/blog\/?p=2374"},"modified":"2025-04-15T12:52:35","modified_gmt":"2025-04-15T11:52:35","slug":"designing-for-colour-blindness-or-why-your-green-button-might-be-red","status":"publish","type":"post","link":"https:\/\/www.forestsoftware.co.uk\/blog\/2025\/04\/designing-for-colour-blindness-or-why-your-green-button-might-be-red\/","title":{"rendered":"Designing for Colour Blindness: Or Why Your Green Button Might Be Red"},"content":{"rendered":"<span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes : <\/span><\/span><p>&nbsp;<\/p>\n<h1>Designing for Colour Blindness: Or Why Your Green Button Might Be Red<\/h1>\n<p>Let\u2019s be honest \u2013 running a small business is already like spinning plates while riding a unicycle on a tightrope in the rain. And now someone\u2019s telling you your website might be a visual horror show for people with colour blindness. Great. Just what you needed, right?<\/p>\n<p>But fear not! We\u2019re going to break down what colour blindness actually is, why it matters when you&#8217;re designing your site, and how to fix the most common problems \u2013 all without needing a PhD in biology or a background in web design. And we\u2019ll even chuck in a few laughs along the way. Let\u2019s go!<\/p>\n<p><!--more--><\/p>\n<h2>What Even *Is* Colour Blindness?<\/h2>\n<p>Contrary to popular belief, colour blindness doesn\u2019t mean seeing the world in black and white like an old detective film. Most people with colour blindness can see colours \u2013 just not all of them. It\u2019s more like someone messed with the settings on their telly and now everything\u2019s a bit\u2026 off.<\/p>\n<p>The most common type is red-green colour blindness, which makes it hard to tell the difference between \u2013 you guessed it \u2013 red and green. Imagine trying to tell whether a traffic light says \u201cGo\u201d or \u201cStop\u201d based on which bit is glowing. Yep. Bit tricky, that.<\/p>\n<p>There are other types too, like blue-yellow colour blindness and the much rarer total colour blindness (where everything genuinely is black and white). But let\u2019s stick with the basics, because even they can cause chaos if you\u2019re not paying attention when designing your site.<\/p>\n<h2>Why Should Small Business Owners Care?<\/h2>\n<p>Look, we get it. You\u2019re busy. You\u2019ve got a to-do list longer than a queue at Greggs on a Friday morning. But designing your website with accessibility in mind \u2013 including for colour blind users \u2013 isn\u2019t just a \u201cnice to have.\u201d<\/p>\n<ul>\n<li><strong>1 in 12 men<\/strong> and <strong>1 in 200 women<\/strong> have some form of colour blindness. That\u2019s a lot of potential customers.<\/li>\n<li>If your site is hard to use, people will bounce off it faster than a toddler on a trampoline.<\/li>\n<li>Google loves accessible websites \u2013 so it\u2019s good for your SEO too!<\/li>\n<li>And finally\u2026 it\u2019s just the right thing to do. Be a decent human. That\u2019s always a win.<\/li>\n<\/ul>\n<h2>The Classic Colour Blindness Fails (And How to Avoid Them)<\/h2>\n<h3>1. The Green \u201cBuy Now\u201d Button That Looks Like a Camouflage Blob<\/h3>\n<p>If your call-to-action button is green, sitting on a red background, and has white text\u2026 congratulations! You\u2019ve just made it invisible to a big chunk of your audience.<\/p>\n<p><strong>Fix it:<\/strong> Use colour <em>and<\/em> contrast. Instead of relying on colour alone to show something\u2019s clickable, make sure there\u2019s plenty of contrast. Use a button shape, an outline, bold text \u2013 something to help it stand out, even in grayscale.<\/p>\n<h3>2. \u201cRed Means Danger\u201d \u2013 Not If You Can\u2019t See It<\/h3>\n<p>Got a warning message in red text? It might look dramatic and urgent to you, but to someone with colour blindness, it could just be\u2026 another bit of text.<\/p>\n<p><strong>Fix it:<\/strong> Use icons, bold labels, or borders to help communicate the message. A warning triangle goes a long way. Bonus points if it\u2019s got an exclamation mark \u2013 everyone knows that means \u201csomething\u2019s gone a bit pear-shaped.\u201d<\/p>\n<h3>3. Colour-Coded Charts That Might As Well Be Abstract Art<\/h3>\n<p>If your beautiful sales chart looks like a rainbow threw up on it, you might want to rein it in. Colour blind users can struggle to tell one data line from another.<\/p>\n<p><strong>Fix it:<\/strong> Use patterns, labels, or icons in your graphs \u2013 not just colour. Dashed lines, dots, and clear labels make your chart readable for everyone (including your uncle who still prints things out to read them properly &#8211; yes, that&#8217;s still a thing).<\/p>\n<h3>4. Stylish? Maybe. Readable? Not So Much.<\/h3>\n<p>That trendy pastel colour scheme you picked might look lovely to you, but it might also mean your text is basically unreadable to someone with visual impairments or colour blindness. Pink on light grey? Come on now.<\/p>\n<p><strong>Fix it:<\/strong> Use a contrast checker (there are loads online) to make sure your text actually pops against the background. If you can\u2019t read it on your phone in daylight with your sunglasses on, it\u2019s too faint.<\/p>\n<h3>5. The \u201cWhich One\u2019s Selected?\u201d Mystery<\/h3>\n<p>Some websites use colour alone to show what\u2019s been selected \u2013 like a red box for \u201cselected\u201d and a green one for \u201cnot selected.\u201d Trouble is, if those colours look the same to you, you\u2019re in for a game of digital roulette.<\/p>\n<p><strong>Fix it:<\/strong> Add an icon (like a tick), a border, or bold text to show what\u2019s been chosen. Clarity beats confusion every time.<\/p>\n<h2>Easy Wins for Accessibility (Without Redesigning Your Whole Website)<\/h2>\n<h3>Use Clear Labels<\/h3>\n<p>Don\u2019t rely on colour alone to get your point across. Use labels, text, icons \u2013 anything that makes your message clear even if someone sees the world like it\u2019s stuck in sepia mode.<\/p>\n<h3>Test Your Site in Grayscale<\/h3>\n<p>One quick trick: take a screenshot of your site and turn it black and white. Can you still tell what\u2019s what? If not, it\u2019s time for some tweaks.<\/p>\n<h3>Use Online Tools<\/h3>\n<p>There are loads of free tools out there to simulate colour blindness and check colour contrast. Try:<\/p>\n<ul>\n<li>Colour Oracle (desktop app)<\/li>\n<li>Sim Daltonism (Mac app)<\/li>\n<li>WebAIM Contrast Checker<\/li>\n<li>Chrome extensions like Spectrum<\/li>\n<\/ul>\n<h3>Pick an Accessible Colour Palette<\/h3>\n<p>There are colour palettes made specifically to be accessible for people with colour blindness. A quick Google of \u201c<a href=\"https:\/\/www.google.co.uk\/search?q=colour+blind+friendly+palette\">colour blind friendly palette<\/a>\u201d will give you more swatches than a Dulux showroom. Pick one and save yourself the grief.<\/p>\n<h2>Real Talk: You Don\u2019t Have to Be Perfect<\/h2>\n<p>Look, nobody\u2019s expecting your website to be perfect. It doesn\u2019t need to win design awards. But a few thoughtful changes can make a massive difference to the people using it \u2013 and that includes colour blind folks.<\/p>\n<p>If you\u2019re working with a <a href=\"https:\/\/www.forestsoftware.co.uk\/blog\/2024\/11\/the-importance-of-communication-with-your-website-designer-for-small-business-success\/\">web designer<\/a>, mention accessibility and colour blindness. If you\u2019re doing it yourself, use the tools, test it out, and maybe ask a mate to have a look \u2013 ideally one who isn\u2019t afraid to tell you your \u201cfunky mauve text\u201d is actually a nightmare.<\/p>\n<h2>Wrapping It Up (In a Sensibly-Coloured Bow)<\/h2>\n<p>Designing for colour blindness doesn\u2019t have to be scary. You don\u2019t need a degree in optics or a sixth sense for shades of turquoise. All you need is a bit of empathy, a handful of free tools, and the willingness to test your site with a fresh pair of eyes \u2013 even if those eyes see colour a bit differently.<\/p>\n<p>And hey, if all else fails, just remember this one golden rule: if your buttons look like camouflage, something\u2019s gone horribly wrong.<\/p>\n<p>Now go forth and design better websites. Your colour blind customers (and your bounce rate) will thank you!<\/p>\n<p>And a final thought, check your printed marketing material as well \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p><span class=\"span-reading-time rt-reading-time\" style=\"display: block;\"><span class=\"rt-label rt-prefix\">Reading Time: <\/span> <span class=\"rt-time\"> 4<\/span> <span class=\"rt-label rt-postfix\">minutes : <\/span><\/span>&nbsp; Designing for Colour Blindness: Or Why Your Green Button Might Be Red Let\u2019s be honest \u2013 running a small business is already like spinning plates while riding a unicycle on a tightrope in the rain. And now someone\u2019s telling you your website might be a visual horror show for people with colour blindness. Great. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,10,3],"tags":[],"class_list":["post-2374","post","type-post","status-publish","format-standard","hentry","category-business-advice","category-marketing-2","category-seo"],"_links":{"self":[{"href":"https:\/\/www.forestsoftware.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2374","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.forestsoftware.co.uk\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.forestsoftware.co.uk\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.forestsoftware.co.uk\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.forestsoftware.co.uk\/blog\/wp-json\/wp\/v2\/comments?post=2374"}],"version-history":[{"count":0,"href":"https:\/\/www.forestsoftware.co.uk\/blog\/wp-json\/wp\/v2\/posts\/2374\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.forestsoftware.co.uk\/blog\/wp-json\/wp\/v2\/media?parent=2374"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.forestsoftware.co.uk\/blog\/wp-json\/wp\/v2\/categories?post=2374"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.forestsoftware.co.uk\/blog\/wp-json\/wp\/v2\/tags?post=2374"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}