Visual Accessibility in Web Design

Creating inclusive digital experiences for everyone in Malaysia. From colour-blind friendly palettes to readable typography, discover how to design websites that work for all users.

Essential Reading

Practical guides and insights on making web design accessible to everyone

Person working at desk with design software showing colour palette options and accessibility guidelines

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.

9 min Intermediate March 2026

Close-up of text on screen showing different font sizes and line spacing measurements

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.

7 min Beginner March 2026

Website interface showing blue focus ring around interactive buttons and form fields

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.

8 min Intermediate March 2026

Team of diverse people in meeting discussing design concepts with sketches and accessibility checklist on table

Building Inclusive Design into Your Process

Accessibility isn’t an afterthought. We show how to integrate inclusive design principles from the start — checklists, testing methods, and team workflows that actually work.

10 min All Levels March 2026

Core Accessibility Principles

These principles form the foundation of accessible web design. They’re not just standards — they’re about respect for your users.

Perceivable

Information must be presented in ways all users can perceive. This means sufficient contrast, readable text, clear images with descriptions, and colour that isn’t the only way to communicate.

Operable

Your site must work with keyboards, not just mice. Focus indicators need to be visible. Users should be able to navigate without time pressure, and animations shouldn’t cause seizures.

Understandable

Content should be clear and straightforward. Language matters. Consistent navigation helps. Error messages should explain what went wrong and how to fix it, not confuse users further.

Robust

Your code needs to work across devices and assistive technologies. Clean HTML, proper semantics, and testing with real accessibility tools — not just assumptions — make all the difference.

Quick Accessibility Checklist

Use this checklist to audit your website. You don’t need to be perfect, but these items matter.

Colour Contrast

Text and background have at least 4.5:1 contrast ratio. Check with tools like WebAIM Contrast Checker.

Font Sizes

Body text is at least 16px. Headings use proper hierarchy. Line spacing is 1.5 or more.

Keyboard Navigation

You can navigate the entire site using Tab key. Focus indicators are visible. No keyboard traps.

Image Alt Text

All meaningful images have descriptive alt text. Decorative images are marked as such.

Colour Not Only Signal

Information conveyed by colour is also shown through text, icons, or patterns. Colour-blind users can still understand.

Semantic HTML

Use proper heading tags, landmark regions, form labels. Don’t use divs where semantic elements exist.

No Automatic Movement

Carousels, animations, and auto-playing content can be paused. Users have control.