In many countries, making physical stores and services accessible to those with impaired vision, hearing, or mobility is a legal requirement.
Back in 1990, the US introduced the Americans with Disabilities Act (ADA), which enforced standards to improve the accessibility of public spaces and workplaces. And in the UK, the 2010 Equality Act requires—with very few exceptions—all places of business to install ramps to facilitate independent access for wheelchair users.
However, the internet can still be a bit of a wild west when it comes to accessibility. We’re currently working to build a design system that improves the accessibility of Designlab’s website and learning platform. We’ve made progress, and are releasing regular updates, but still have a way to go.
In the course of developing our new design system, we’ve noticed that there isn’t much easy-to-use guidance about designing for inclusion. So, in this piece, we’ve rounded up the most important and immediately implementable tips for UI designers, and packaged them up into a concise list of dos and don’ts.
At the end of the article, you can also download a PDF checklist of these tips for quick reference. We hope you find it helpful!
Article outline
- Accessibility vs Inclusion
- Process
- Text and Typography
- Color and Contrast
- Navigation and Interaction
- Scalability
- Images and Videos
- Engineering and Markup
- PDF Checklist
Accessibility vs Inclusion
Before diving into the tips, just one note on terminology. When we’re designing, it’s tempting to think in terms of “regular” users as the main focus, and then to treat users with any kind of impairment as an edge case for which we might need to compromise our core design. It's this kind of approach that gave rise to the concept of “accessibility”—modifying a “normal” experience to be more usable for another user group.
For a number of reasons, “accessibility” isn’t a great way of thinking about these issues. First, for most products and services, users groups or user personas will be defined by their relationship to the product or service, not by whatever abilities and disabilities they might have in interacting with your app or website.
But just as importantly, the accessibility approach ignores how widespread and varied our disabilities and impairments are. In this article over at UX Magazine, Jennifer Aldrich argues that we should all move towards thinking of ourselves as “temporarily abled”—to switch our bias from creating a regular experience for an idealized set of abilities, and towards creating an experience that can accommodate the widest possible range of needs (without having to enable “accessibility options”). And this isn’t just about long-term disabilities; she makes the excellent point that “angry, sobbing, or drunk people may try to use your product”, and this also has an effect on people’s abilities.
Finally, in ethical and social terms, the attitude that disabled users are on the edge of a product’s design—people for whom we need to bend or alter our “main” website or app experience—unnecessarily reinforces the kind of social exclusion and marginalization that people experience in the physical world every day. The tips that we’ve selected in this piece are, therefore, intended as advice on how to make any design more inclusive of all users.

Process
1. Begin every project with an open mind
Perhaps the first thing to recognize when designing for inclusion is that impairments come in many forms. To many of us, the obvious ones are visual and physical disabilities, but we also need to consider that users may suffer from epilepsy, or be on the autistic spectrum, or live with a learning difficulty, dementia, or other cognitive impairment.
Our responsibility as designers is to shape our designs in such a way that interfaces are available to and usable by as many people as possible. In essence, we are designing for humans, and humans span a wide range of experiences, abilities, and aptitudes.
And another important thing to recognize from the outset is that, in the words of Jesse Hausler, “we aren’t designing for designers”. While aesthetics are important—including for usability—we need to remind ourselves that beauty is only one aspect of good design, and in most cases the usability and accessibility of a product are more important than how it looks.
2. Invest in user research
Before considering any of the other tips in this list, make sure that you’re investing adequately in user research right at the beginning of your project. Assumptions in design are dangerous things—and when it comes to accessibility, it’s very hard to understand a user need that you have never yourself experienced.
So, for example, if you’re wanting to ensure that your design is inclusive of those with a visual impairment, engage members of that user group in the research process for your project. If you’re working for a client who doesn’t see the need for research, explain why it’s important for their project, and how the benefits will show in the results they see further down the line.
3. Conduct user testing
The same applies to testing. Even if you have acted on every insight from your research, there will still be subtleties you’ve missed, or ways that the solution you’ve found could be further enhanced with feedback from the user group you’re designing for.
Further reading on inclusive design
- What do we mean by inclusive design? (Inclusive Design Research Centre)
- The difference between inclusive design and accessibility (Eone)
- Microsoft’s inclusive design principles

Text and Typography
4. Set a font size of at least 16px, and ideally 20px for body text


It’s often said that the web is 95% typography. Favoring a larger text size in all areas of a design can significantly ease and enhance the experience for visually impaired users, without having any detrimental effect on other user groups.
5. Where small text has to be used, use uppercase, letter spacing, and a heavier weight


When it comes to screen elements where space is particularly limited, like in top navigation bars and footers, It can be tempting to choose a much smaller text size. For example, at the time of writing, Spotify’s tab bar uses 8px text labels with its icons—and Netflix’s is even smaller.
This kind of decision is usually driven by aesthetic considerations, as well as the desire to cram in more options. Try to avoid using small text, but if there are labels or menu items where text size is a necessary trade-off, consider using all-uppercase, a moderately heavier font weight, and slightly expanded letter-spacing.
6. Make line length around 50-60 characters on desktop, and 30-40 characters on mobile


Using a relatively short line length helps the user’s eye travel back to the start of the next line without getting lost. It also reduces the strain of reading a long line, which for some users might require head movements as well as eye movements. However, note that lines that are too short can be just as difficult to read, because they force the eye to rapidly move from one line to the next.
7. Use a line height (line spacing) of at least 1.5 (150%)


W3 accessibility guidelines recommend using line height of at least 1.5 lines (150%). So for 20px text, that means using a line height of 30px. This serves the same purpose as a moderate line length—creating a clear (but not excessive) channel of white space between lines of text to help guide the eye to the start of the next line.
Line spacing on digital touchpoints tends to be much larger than in books, newspapers or magazines. There are a number of possible reasons for this. Above all, people are likely to be using digital devices from further away than they would read a book (think of a typical desktop computer setup).
Second, computer screens usually produce lower contrast than natural light on printed matter. And third, particularly on mobile, people may be using their device in suboptimal conditions, for example while walking. Generous line spacing helps make reading easier in all these cases.
There are some valid exceptions to this rule. For example, if your design includes text in quite narrow columns (think of the home page of newspaper sites like the New York Times), then it is legitimate to use a lower line spacing, because the eye doesn’t need as much help to return accurately to the next line of text.
8. Choose fonts with a large x-height


The term “x-height” refers to the height of lowercase letters (like x) compared with uppercase letters within the same typeface. Most default interface fonts today—like Apple’s San Francisco and Google’s Roboto—have a large x-height, as do the fonts we use at Designlab (Proxima Nova and Georgia). As a result, the letterforms are larger and clearer for the given text size.
Examples of inaccessible fonts—typefaces with small x-heights—include (albeit beautiful) typefaces like Baskerville. The fonts pictured above are Georgia, a serif designed by Matthew Carter for screen use, and Mrs Eaves, a serif by Zuzana Licko, which is more suitable for print.
9. Avoid light text weights, particularly at small sizes


To be legible for visually impaired users, the letterforms in a font need to be thick enough to create significant contrast with the background color. If a font’s weight is too light (thin), the text becomes very hard to read.
More resources on inclusive text and typography
- To choose the right typeface, look at its x-height (Ricardo Magalhães)
- Your body text is too small (Christian Miller)
- Size Matters: Balancing Line Length And Font Size (Laura Franz)
- Readability: the optimal line length (Christian Holst)
- Why you should go big with line spacing (Damian Jolley)

Color and Contrast
10. Use high-contrast color combinations


“Contrast” in the context of accessibility doesn’t mean contrasting hues (e.g. blue and red), but rather contrasting value—which refers instead to the relative light and dark of two colors.
We can quantify contrast in a “contrast ratio”. The AAA standard in W3 accessibility guidelines requires a contrast ratio of at least 4.5:1 in large elements, and at least 7:1 in regular elements. (Note that these requirements don’t apply to decorative elements like logos and illustrations.)
There are some online tools that allow you to check the contrast ratio of your color choices, including WebAIM’s contrast checker and Colorsafe. Also, Stark is a useful browser plugin that allows you to check the contrast of any two colors.
Another approach to sense-checking the contrast in your design is to look at it in a desaturated view. To do this, export your design as an image file, open it in Photoshop, and then desaturate the image (Image > Adjustments > Desaturate). This removes all color information apart from value (light and dark), allowing you to assess contrast without being distracted by hue.
If you choose not to get into technical contrast levels, just remember that black and white have the greatest contrast on screens, and is generally the easiest combination to read. Any step away from black and white represents a reduction in contrast, and gradually makes a design less inclusive.
11. Avoid problematic color combinations for functional elements

Around 1 in 12 boys and men, and 1 in 200 girls and women, suffer from some form of colorblindness—that’s 5% of all users. The most common forms of colorblindness mean that affected people may find it hard to distinguish between:
- green and orange
- red and green
- blue and purple
- red and brown
- blue and green
It’s particularly important to avoid difficult color combinations where the colors are functional in some way–for example, where they are used to color-code a map, or to indicate the function of buttons. Using red and green to indicate “stop” and “start” in an interface could be very problematic for a person with colorblindness.
12. Support color choices with patterns, icons, and text labels


Another way to ensure that color choices don’t become an obstacle for users with colorblindness is to make sure that all meanings are also conveyed in a second way. For example, instead of using only color to indicate status, we could combine the color with icons like a check and a cross.
In other contexts, we can supplement color with different shading patterns, text labels, and outlining. For instance, by using a thicker line around form fields that are in an error state, we accommodate the needs of users who can’t see that the outline color has changed to red.
And in product copy, if referring to interface elements, take care not to refer only to their color—say “press the round button to start” rather than “press the green button to start”.
13. Consider autistic spectrum disorders when choosing color schemes

Around 1 in 160 people has an autistic spectrum disorder, and research has found that the color yellow can be distressing to some people in that population, being associated with sensory overload. Consider avoiding the use of yellow, or use it sparingly.
More resources on inclusive color and contrast
- Types of colorblindness
- Take Enchroma’s color blindness test!
- Stark, a browser plugin to measure color contrast
- UseContrast’s guide to text contrast
- Colorsafe helps you build high-contrast color palettes
- WebAIM’s contrast checker
- ColorOracle is a free colorblindness simulator

Navigation and Interaction
14. Plan a clear and relatively linear visual hierarchy


When it comes to making a design accessible to all, don’t overlook the importance of first planning your content and deciding how it will be organized. Then, reflect this information hierarchy in a clear visual hierarchy that takes the user’s eye on a natural journey through the content. Using Gestalt principles (principles of grouping) helps to organize related items and support visual hierarchy.
15. Avoid hiding content


If you have minimalist tendencies, it can be tempting to try and remove anything that feels like visual clutter. This can be good when it comes to simplifying decoration and styling, but problematic if it means obscuring functionality. Common ways that content is unnecessarily hidden include the use of question mark icons or tooltips to hide helper text.
If you’re hiding content to create hierarchy between primary and secondary content or functions, consider using a menu or an alternate text style that adds hierarchy without introducing a barrier to usability.
16. Keep button and link text short


Screen readers will read out all of the text in links and buttons. A link that covers a whole paragraph of text can therefore be seriously frustrating. Keep button and link text short to avoid creating this problem for users.
17. Make buttons and interactive elements big enough to tap


Many websites use buttons that are too small to tap for the average user—a sure sign that these elements are seriously problematic for anyone with impaired vision or motor function. Web standards require that any touch target be a minimum of 44*44px, though Google recommends a minimum of 48*48px.
The tips on text size above apply equally to buttons. Use plenty of padding and spacing to ease these interactions; on mobile, it’s also a good idea to make the button span the whole grid width.
Note that W3 guidelines also forbid nesting one control inside of another—so, for example, you shouldn’t have a button within a card that links to a different destination or action.
18. Forgive user error


If a user makes an error, the system should forgive that error and facilitate correction. For example, if a user puts the wrong information into an email address field, the system should help the user to fix the problem rather than generating a non-specific error message, or even breaking the form completely.
19. Make sure that there is clear space separating touch elements


Google recommends that touch elements should be separated by at least 8px of space. As well as making it clearer that the controls in question are indeed separate ones, this also reduces the risk of the user accidentally tapping the wrong option.
20. Support user understanding through affordance and feedback


In UI design, an “affordance” is a design pattern that provides a hint about how it can be interacted with. For example, where the user can swipe through a carousel of images, we can hint at that functionality by displaying the start of the next image at the edge of the screen. Affordances such as these reduce the gap between form and function in digital design, which is particularly beneficial for children and users with certain cognitive impairments.