Inclusive design isn’t a bonus; it’s a baseline.
Over 71% of users with accessibility needs will abandon a website they find difficult to use, which makes accessibility a critical priority for not-for-profits and organisations that serve diverse, often marginalised communities.
Colour accessibility plays a big part. It ensures your website works for everyone—including the 300+ million people worldwide affected by colour blindness and the 1 in 5 Australians living with disability*. And it’s not just about ticking a compliance box—it’s about inclusion, usability, and making sure your message reaches the full spectrum of your audience.
In this blog, we unpack why colour accessibility matters, share real-world NFP examples, and offer a simple self-audit checklist—with visual examples to help you identify what works (and what doesn’t).
Executive Summary:
This blog explores how colour accessibility improves readability, navigation, and engagement for users with visual impairments—especially those with colour blindness or low vision. You’ll find:
-
Real-world examples from not-for-profits leading the way in inclusive design
-
Common colour accessibility issues and how to fix them
-
Tools and practical steps to evaluate and improve your own site
-
A checklist for auditing colour use on your website
When your website works for everyone, you create a more inclusive, impactful experience—and strengthen trust with your audience.
What Is Colour Accessibility?
Colour accessibility refers to designing visual content in a way that accommodates all users, including those with visual impairments like colour blindness or low vision. It ensures that your content is readable and navigable regardless of how someone perceives colour.
Why It Matters
- Over 549,000 Australians have some form of colour blindness. Yes, over half a million Australians.
- If your palette is hard to read, your message won’t land.
- Low contrast or reliance on colour alone can make key info invisible.
- This results in higher bounce rates, poor usability—and lost trust.
“71% of people with disabilities leave a site immediately if it’s not accessible.”
— Web Accessibility Initiative
Common Colour Accessibility Issues (and How to Fix Them)
When colour isn’t used accessibly, it can create serious barriers. Below are the most common issues we see—and how to resolve them.
1. Low Contrast Between Text and Backgrounds
❌ Issue: Light grey text on white? Orange or yellow text on white background? These combos may look eye catching but are hard to read for many users.
✅ Fix: Use a contrast ratio of at least 4.5:1 for body text, or 3:1 for large or bold text. Free tools like WebAIM Contrast Checker or the TPGi CCA can help you test this quickly
2. Relying on Colour Alone to Communicate Meaning
❌ Issue: Colour-coded status (e.g. red = error, green = success) becomes meaningless to users with colour blindness.
✅ Fix: Always pair colour with other cues—icons, labels, patterns, or shapes. For example, instead of using a red border for error, use a red border and a warning icon with descriptive text.
3. Inaccessible Colour Combinations for Colour-Blind Users
❌ Issue: Red/green and blue/purple pairings can appear indistinguishable to people with colour blindness.
✅ Fix: Use colour-blind friendly palettes (e.g. blue/orange) and check your work with simulators like Color Oracle or Funkify.
4. Buttons, Charts, or Links That Depend Only on Colour
❌ Issue: A button that changes colour on hover or a chart with colour-only legends can exclude users.
✅ Fix: Ensure buttons have shape changes or labels, charts use patterns/textures, and links are underlined or bolded, not just coloured.
Colour accessibility doesn’t mean limiting your brand’s palette — it’s about using colour strategically to ensure clarity, inclusivity, and impact for every audience.
Real World Examples
Women with Disabilities Victoria
In our branding work with Women with Disabilities Victoria, we developed a rich and expressive colour palette. The key wasn’t reducing choice, but applying thoughtful rules about how colours are paired. With the right contrast, combinations, and hierarchy, accessibility and creativity can go hand in hand.
ACSO (Australian Community Support Organisation)
ACSO (Australian Community Support Organisation) came to us with the goal of maintaining their current branding while addressing accessibility issues with their colour palette. We refined the palette to improve readability and versatility with WCAG-compliant contrast levels. Additionally, we created brand-consistent rules that worked seamlessly across all digital and print touchpoints.
Key Actions:
- Refined the colour palette by adding a neutral base and WCAG-compliant contrast levels.
- Established brand-consistent rules for all digital touchpoints.
- Prioritised accessibility while preserving the integrity of the existing brand.
Outcome: Improved navigation, easier content comprehension, and no compromise on brand identity.
National Centre for Action on Child Sexual Abuse
From the outset, we prioritised accessibility in every aspect of the National Centre’s branding and website. This included integrating the UserWay plugin for real-time adjustments, ensuring dyslexia-friendly fonts, and embedding colour accessibility into the design process. Our approach was shaped by collaboration with victims, survivors, and stakeholders to create a brand that resonates with a broad, diverse audience.
Key Actions:
- Integrated the UserWay plugin for real-time accessibility adjustments.
- Ensured dyslexia-friendly fonts and customisable viewing options.
- Embedded colour accessibility into the branding, focusing on contrast and colour choices.
- Co-designed with victims, survivors, and stakeholders to ensure empathy and inclusivity.
Outcome: A more inclusive, accessible experience for a diverse audience.
Key Principles for Accessible Colour Use
Follow these four foundational design principles to ensure your colour choices are inclusive and user-friendly from the outset.
1. Prioritise Readability with Strong Contrast
Text should be easy to read against its background. Aim for a minimum contrast ratio of 4.5:1 for body text and 3:1 for large or bold text. Use tools like WebAIM or the Colour Contrast Analyser (CCA) to test your combinations—especially on buttons, headings, and key content areas. Consider starting with accessibility in mind during palette selection, as recommended by Vision Australia.
2. Use Visual Cues
Never rely on colour alone to convey meaning. Combine colour + label or colour + icon—particularly in forms, alerts, status updates, and charts.
We recommend adding patterns or shapes to visuals like charts or alerts to create multiple ways to understand a message, making your design more inclusive for users with colour vision impairments.
3. Build a Colour-Blind Friendly Palette
Use colours that are distinguishable for users with common forms of colour blindness, such as deuteranopia or protanopia.
Avoid red/green and blue/purple pairings, and test your palette with simulators like Color Oracle or Funkify.
To help guide your palette proportions, Vision Australia recommends the 60/30/10 rule:
- 60% = Neutral background (e.g. light grey)
- 30% = Structural elements (e.g. navigation, cards)
- 10% = Accent colours (e.g. buttons, links)
Read more about the 60/30/10 rule from Vision Australia, here.
4. Design for Flexibility Across Devices
Ensure your colour accessibility holds up across different screens and modes—mobile, desktop, light mode, and dark mode. What works well on a retina display may not perform as well on older or lower-resolution screens.
Quick Website Self-Audit
Use this 5-step checklist to evaluate your site’s colour accessibility:
- ❓ Is your text-to-background contrast at least 4.5:1?
- ❓ Do error messages or CTAs rely only on colour?
- ❓ Are your charts, links, and buttons understandable without colour?
- ❓ Have you tested your palette in a colour-blind simulator?
- ❓ Have real users with visual impairments tested your site?
How Storyfolk Can Support Colour Accessibility
When we create a brand or website, accessibility isn’t something we add in later; it’s built in from the start. Working closely with clients in the disability sector has only deepened our understanding of what inclusive design really looks like. And while we’re often surprised it’s not yet standard practice across the industry, we see it as an opportunity. We use what we’ve learned to guide all our clients towards visual identities and digital experiences that are both beautiful yet accessible… because good design should work for everyone.
We create clear, easy-to-follow colour usage guides as part of your brand toolkit. These include:
- Primary, secondary, and accent colour specifications
- Contrast pairing recommendations for text and backgrounds
- Accessible use examples for buttons, headings, charts, and CTAs
- Do’s and don’ts for colour application to maintain brand integrity and accessibility
We also run your colour palette through tools like Colour Contrast Analyser (CCA) to ensure every colour combination meets WCAG 2.1 standards for readability and usability. Whether it’s a website, digital platform, or printed material, we make sure your colours work for everyone.
Accessible design isn’t just good design; it’s a strategic decision that broadens your reach, strengthens your brand, and reduces risk. By designing with inclusivity in mind, you open your brand or organisation up to more customers, meet evolving legal and ethical standards, and future-proof your brand and digital presence. It’s not about doing more; it’s about doing better, for everyone.
Practical Tools & Resources
Colour contrast checkers
Colour contrast checkers, such as tools or plugins, help assess the readability of text and images on a webpage or document, ensuring compliance with WCAG 2.1 standards.
- TPGi Colour Contrast Analyser (CCA)
TPGi offers a free downloadable tool that helps you evaluate and improve text and visual contrast to support users with colour blindness or low vision.
- WebAIM Contrast Checker
A straightforward online tool for instantly checking contrast between foreground and background colours using RGB values.
Colour Blindness Simulators
Browser extensions are available that let you experience your website through the lens of different types of colour blindness and visual impairments.
- Funkify
A Chrome extension that allows you to simulate a variety of visual, motor, and cognitive disabilities to test the accessibility of your web interface. - Color Oracle:
Color Oracle is a free color blindness simulator for Windows, Mac, and Linux, showing how people with color vision impairments see colors in real time.
Plug ins and extensions to better your website
- UserWay Plugin: The Accessibility Widget makes your website more accessible by automatically adjusting for various disabilities. It’s easy to install, works on any platform, and ensures compliance with accessibility standards. This one’s a favourite of ours; a powerful tool that transforms your existing site into a fully customisable experience, without the cost or complexity of a full redesign. Smart, seamless, and very affordable.
Conclusion
Colour accessibility is not a “nice to have”; think of it as a core part of inclusive, user-first design. It benefits your users and your brand, improving usability, engagement, and trust. By using accessible colour practices, you’re not only meeting standards—you’re showing every user that they belong.
* Statistics from https://www.colourblindawareness.org/colour-blindness/types-of-colour-blindness/ https://www.jobaccess.gov.au/stories/1-5-aussies-have-disability , survey by Click-Away Pound.
Want your brand to reach more people, and resonate more deeply?We specialise in strategic, human-centred branding and digital design for not-for-profits. From accessible websites to inclusive visual identities, we help organisations like yours communicate with clarity, purpose and impact.
Explore our NFP branding & strategy services and website NFP specialised services
Contact our Creative Director, Sarah Gross, to discuss your project sarah@storyfolk.com.au
