Color use for inclusive design


Not everyone perceives color as you might do. We’ve got a bunch of tools to help you choose inclusive color combinations. You can work in different ways to ensure your palettes are user friendly and meet standards.

The Accessible color palette builder

Use high contrast colors to keep your design readable for people with a range of visual needs.

Color Safe

Select a background colour & your planned font & size to generate accessible text colors that meet WCAG Guidelines.

Who can use?

Enter your color combination & this tool will show you how it appears to people with different visual conditions. It also lets you know what percentage of the population these conditions affect.


Add this extension to your browser to simulate & understand how those who see color differently see your webpages.


Test 3 to 12 colors in combination. This tool gives the combinations a simple Yeah or Naw. You will know which ones are good to use!


Type in the URL of any webpage. You can check how people who have different types of color blindness will see it.

Color Review

Test different colour contrasts to make your website accessible to the 217 million people living with visual impairment.

Typography & layout for inclusive design


The way you use typography and layout your text is crucial. These resources will guide you on font size and choice, and on structuring your layout for inclusivity and accessibility.

Your Body Text Is Too Small

Xtian Miller explains why many websites should increase the size of their body text to better serve readers.

More Meaningful Typography

Tim Brown explains how to create a modular scale for web design.

PX to EM

This resource shows how font sizes in pixels compare to point sizes.

Fonts don’t matter

Hampus Sethfors explains what typography choices really matter to making your design readable & accessible.

Designing accessible content: typography, font styling, & structure

Ensure you design your typography to be accessible to people with various needs.

Type Scale

Generate modular scales to find the perfect Type size for different components.

Image use for inclusive design


Images are important so readers can understand and learn complex information. Breaking up text with images can also help make the page more readable for many viewers. These resources identify important ways to make image use inclusive.

Tiny PNG

We need to consider how to set up images so they don’t cause slow load times. This tool enables you to compress images without losing quality.

Alt-texts: The ultimate guide

Alt-texts should describe images for people who can’t see them. But often they are not used correctly & create a difficult experience for users. Learn about how to use alt-texts effectively.

HOW to describe images

Learn the best ways to describe images with this interactive training resource. This will enable you to make alt-texts that are useful & inclusive.

Accessible images

This thorough guide by WebAIM covers using images to enhance understanding. You can also learn about how using color to convey meaning in images can cause problems. And crucially, how to avoid using graphics that cause seizures.

Turn the tide towards inclusive design


These videos are essential viewing for designers who want to bring positive change. They give further context to the role of inclusivity in digital design. Plus, they challenge biased ideas about disability. Many give voice to designers who have communication differences. They emphasise the need to include everyone in design processes. We should design with people, not for people.

Accessibility with Marcy Sutton

Marcy Sutton discusses the importance of including people with disabilities as stakeholders in building an accessible internet. She talks about what is at stake when we do not use accessibility.

When we design for disability, we all benefit

Elise Roy explains that the energy put into designing for & by people with disabilities can benefit all of us. We shouldn’t just tolerate difference, we should embrace it.

Inclusive design: Designing for deaf people helps everyone

Marie van Driessche discusses the need to understand disabilities as mismatched human interactions, rather than as an individual’s health conditions.

Microsoft Ability Summit 2020

The 10th Microsoft Ability Summit brought disabled people & allies together to empower inclusion & accessibility. This was the first Microsoft Ability Summit to be virtual.

Accessibility For Everyone

Laura Kalbag highlights that up to 98% of homepages do not meet the WCAG2 standards for accessibility. She talks about what accessibility is, & how to fix a lack of it.

Laura Kalbag on Accessibility for everyone

At Loupe 2019 Laura Kalbag breaks down the difference between inclusion & accessibility.

Inclusive Design 24 conference - 2019

IID24 is an annual, 24-hour, global, free conference on inclusive design. It celebrates inclusive design & shares information and ideas.

Courses to become
an inclusive design expert

Learning about accessibility will make you a better designer. You will make digital spaces better for users. And you will do better work for your clients or employers.

Non-user-friendly websites are already less likely to rank in search engines. Businesses which do not shift to inclusive or accessible digital design will lose out.

But most importantly, including everyone’s needs when we design digital spaces is the right thing to do to!

Now is a good time to take your inclusive and accessible design skills up a notch. So check out these courses to build your skills and knowledge.

Standards to check your inclusive designs

Check the requirements to meet the WCAG three levels of accessibility.
The three levels of accessibility compliance are:



This is the minimum standard, without which your website will exclude people.


Ideal Support

AA standards will create a higher level of, and a more ideal level of support. It is a requirement that public body websites reach this standard.


Ideal Support

Meeting AAA standards will help platforms to serve users with more specialist needs.