Design for accessibility

Why should designs be accessible?

A design should always be accessible because otherwise you leave out a large fraction of people and don't provide equal access to all the users. Aside from this reason, numerous countries have laws to ensure that designs are accessible, failing to do so might lead to legal repercussions.

The A11Y project

The A11Y project does a really great job at explaining all the basics to make your project more accessible. It is a community-driven effort to make digital accessibility easier. There are plenty of resources you can find there. Their checklist is a great way to see how accessible your project is.

Accessibility Tools

There are a lot of tools available to facilitate the process of making our design more accessible. Mentioned in the upcoming sections are some of these:

Stark

Stark is an amazing tool that works seamlessly in Figma, Sketch and Adobe Xd. It assists you with checking the color contrast. It also gives its users access to a colorblind simulation which is very helpful. Furthermore, Stark recommends contrast friendly colors to make your job easier.

WhoCanUse

WhoCanUse is a tool that can easily let you know if the color that you are using has a good contrast ratio and how it will affect people with different visual impairments.

Color Oracle

Color Oracle is a color blindness simulator app. This tool can give you a good idea of how your design will look to people with common color vision impairments.

Typography

People with visual impairment, color blindness, and reading difficulties, among others, are part of the group that we need to keep in mind while creating designs. It is best to have text elements that are easily readable which means you should avoid Speciality Display Fonts.

Daniel Schwarz, in one of his articles about accessibility, suggests to focus on some details like:

• Alignment: left or right only (don’t justify)
• Minimum font size should be around 16px
• Line spacing: at least 1.5x the font size
• Paragraph spacing: at least 1.5x the line spacing
• Paragraph width: max. 80 characters; 40 for CJK characters

Accessible Colors

There are many apps that can help you check if your colors are accessible. One interesting app is contrast, made by soffes and mds, that helps you choose colors that follow the accessibility guidelines.

Accessible color systems

If you want to go a step further, you can create entire color systems. Daryl Koopersmith and Wilson Miner from Stripe mention in their article, that it is important to hand-pick colors and check their contrast against a standard. There is another interesting article by Katie Riley where she explains how she created an accessible color scheme.

Working with Stark

In this example we will show you how to test your colors for accessibility using a plugin called Stark which is available for Sketch, Figma and XD. For this exercise we will use Figma. So in Figma, let's go to Community, then to plugins and search for Stark.

Once installed, we will select two layers - the text named UI Design for iOS 14 and the background layer. Then, go to the tab bar, click on Plugins < Stark < Check Contrast.

A new window will appear. This will analyze our assets and evaluate the colors we are using in our design, if all checks pass, it'll show green checkmarks. In our case the colors we are using in the example are looking good and are between the permitted range for accessibility.

Let's try out the colorblind simulation feature. Go to the tab bar and click on Plugin, then go to Stark and select Colorblind Simulation; this will allow us to see our colors the same way people with visual impairments will see.

A new small window will pop-up, so you can choose the Simulation tab. On the colorblindtype drop down, choose Tritanopia for this example. You will notice that the color of your artboard will change, like that you can have a quick peak of how your design will look for the user.

Conclusion

There are many things to keep in mind while designing an application that is accessible to all. Investing your time in designing things that are more inclusive and accessible to users shows that you care about all your users.