Colour-Blind Friendly Palettes: Beyond Basic Contrast
Learn how to select and combine colours that work for all types of colour blindness. We break down the science and show practical examples you can use today.
Read GuideDesign for Everyone
Accessible web design starts with colour, typography, and focus. Learn the principles that make digital spaces inclusive for all Malaysian users.
Why It Matters
Accessibility Isn’t Optional
In Malaysia, over 3 million people experience some form of visual impairment. That’s your potential audience. Web accessibility isn’t a feature—it’s a responsibility.
Vision Matters
Colour-blind users represent 8% of males and 0.5% of females. Your palette needs to work for them, not against them.
Keyboard Navigation
Not everyone uses a mouse. Clear focus states make keyboard navigation intuitive and essential for accessibility.
Readable Type
Font size matters. WCAG guidelines recommend minimum 16px for body text—readability for everyone, not just those with perfect vision.
Core Concepts
Four Pillars of Visual Accessibility
These principles guide every decision in accessible web design.
01
Colour Independence
Never rely on colour alone to communicate information. Use patterns, icons, and text labels alongside colour choices. A colour-blind user should understand your interface without seeing colour.
02
Sufficient Contrast
WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text. That’s not negotiable. Test your colours—don’t guess. Tools like WebAIM help verify contrast ratios instantly.
03
Readable Typography
Font size starts at 16px minimum. Line height should be 1.5 or greater. Letter spacing matters too—cramped text exhausts low-vision users. Generous spacing costs nothing and helps everyone.
04
Visible Focus States
A keyboard user navigating your site needs to see where they are. Focus indicators must be visible, persistent, and obvious. Don’t hide them with outline: none—that’s the opposite of accessible.
Learning Resources
Visual Accessibility in Web Design
Explore detailed guides on colour palettes, typography standards, and focus state design. Each resource is practical and immediately applicable.
Font Size Standards for Readability
What’s the right font size? We’ve researched WCAG guidelines and Malaysian accessibility standards to give you clear, actionable recommendations for every context.
Read Guide
Focus State Indicators That Actually Work
Keyboard navigation matters. Discover how to design focus states that are visible, clear, and don’t look like an afterthought. Includes code examples and best practices.
Read Guide
Best Practices
Accessibility Standards That Work
These aren’t theoretical guidelines—they’re practical standards used by successful companies across Malaysia and globally.
WCAG 2.1 AA
Web Content Accessibility Guidelines
The international standard for web accessibility. Level AA is the practical target for most websites—achievable and meaningful.
16px Base
Minimum Font Size
Don’t go smaller. Body text at 16px, headings scaled proportionally. This applies to all users, not just those with vision loss.
4.5:1 Ratio
Contrast Minimum
Text-to-background contrast of at least 4.5:1 for normal text. Test with WebAIM or Contrast Ratio. It’s non-negotiable.
Visible Focus
Keyboard Navigation
Every interactive element must show a visible focus indicator. Outline: 2px solid works. Outline: none is never acceptable.
Real Impact
What Accessible Design Means
Designers and developers who’ve implemented these principles share what changed.
“Honestly, I wasn’t paying attention to focus states until we got feedback from a keyboard-only user. Once I added visible focus rings, everything clicked. Now I can’t imagine designing without them.”
— Aisha, Product Designer
“We switched our colour palette to be colour-blind friendly and discovered it actually looked better. Turns out what works for colour-blind users improves the design for everyone else too.”
— Marcus, UX Developer
“Font size wasn’t something I thought about deeply. Then I realized my grandmother couldn’t read my site without zooming. 16px base font isn’t just accessible—it’s respectful.”
— Priya, Frontend Engineer
Common Questions
Accessibility Questions Answered
Here’s what designers and developers most often ask about visual accessibility.
Does accessibility cost more to implement?
Not really. Accessible design is built into your process from the start, not bolted on at the end. It actually saves money because you’re not retrofitting later. Plus, accessible sites reach more users—that’s good business.
What’s the difference between colour-blind types?
Protanopia (red-blind), deuteranopia (green-blind), and tritanopia (blue-yellow blind) each affect colour perception differently. Tools like Coblis let you see your site as a colour-blind user would. Test your designs this way.
Is 16px really necessary for body text?
Yes. WCAG guidelines recommend it. Smaller text exhausts users with low vision and slows reading speed for everyone. You’re not losing design space—you’re gaining readability.
Can I style focus indicators however I want?
Not really. They need to be visible and obvious. A thin outline won’t cut it. Aim for 2-3px outlines with good contrast. Users navigating by keyboard need to see exactly where they are.
How do I test if my site is truly accessible?
Use automated tools (WAVE, Axe, Lighthouse) for baseline checks. Then test manually: navigate with keyboard only, disable colours, use a screen reader. Real testing catches what automated tools miss.
Is accessibility just for users with disabilities?
No. Accessible design helps everyone. Older users, people in bright sunlight, users on slow connections—they all benefit. Accessibility is inclusive design. It’s just good design.
Ready to Build Accessible Design?
Whether you’re starting from scratch or improving an existing site, we’re here to help. Let’s talk about your accessibility goals and create a plan that works for your team.
Start the Conversation