Find tips, information and resources to create accessible design and content.

Colours

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.

Make sure you use colour in ways that are accessible to your users with these resources on color use.

• Color Review
  Test different colour contrasts to make your website accessible to the 217 million people living with visual impairment.
  
• Toptal
  Type in the URL of any webpage. You can check how people who have different types of color blindness will see it.
  
• HEX NAW
  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!
  
• Color Review
  Test different colour contrasts to make your website accessible to the 217 million people living with visual impairment.
  
• Toptal
  Type in the URL of any webpage. You can check how people who have different types of color blindness will see it.
  
• HEX NAWTest 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!
  
• Colorblindly
  Add this extension to your browser to simulate & understand how those who see color differently see your webpages.
  
• 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. Read a case study showing how to use this tool here.
  
• Color Safe
  Select a background colour & your planned font & size to generate accessible text colours that meet WCAG Guidelines.
  
• The Accessible color palette builder
  Use high contrast colors to keep your design readable for people with a range of visual needs.

Typography

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.

Find out how to use typography in ways that improve accessibility with these typography resources.

• Type Scale
  Generate modular scales to find the perfect Type size for different components.
  
• Designing accessible content: typography, font styling, & structure
  Ensure you design your typography to be accessible to people with various needs.
  
• Fonts don’t matter
  Hampus Sethfors explains what typography choices really matter to making your design readable & accessible.
  
• PX to EM
  This resource shows how font sizes in pixels compare to point sizes.
  
• More Meaningful Typography
  Tim Brown explains how to create a modular scale for web design.
  
• Your Body Text Is Too Small
  Xtian Miller explains why many websites should increase the size of their body text to better serve readers.

Images

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. Use our image tips to make sure your images are accessible.

• 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.
  
• 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.
  
• 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.
  
• 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.
  
  

Videos

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.

Watch our selection of videos discussing accessibility.

• 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.
  
• 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.
  
• 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.
  

Courses

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!

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.

Find courses on accessibility here.

• Introduction to Web Accessibility by W3C
  This course teaches web accessibility foundations, covering international standards, assistive technologies, business benefits, and W3C resources. It’s designed for developers, designers, content authors, project managers, and people with disabilities, with optional materials available for deeper learning.
  
• Accessibility fundamentals by Microsoft
  The Microsoft accessibility course has three modules that cover different aspects of accessibility. The first introduces core accessibility concepts, the second highlights accessibility features in Microsoft products, and the third shows how to create accessible content with Microsoft 365.
  
• Web Accessibility by Google
  This course teaches how to create accessible web applications, covering topics like screen reader compatibility, input focus, semantics, ARIA markup, and styling for partial vision.
  
• 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.