What is designing for accessibility? Put simply, designing for accessibility is making sure your course, website, or application is visually clear to people with vision impairments. Things like color, contrast, and typography play a large part in whether you include, or exclude, a specific set of your audience. You will likely never know exactly who will be accessing your course or webpage so you must prepare your designs for everyone.
In this write up I will discuss not only what you should be doing to make sure your designs are accessible, but also how to design in a way that doesn’t sacrifice aesthetics.
Contrast and color
One of the most important things you can do to make sure your designs are accessible for the visually impaired is to use high contrast ratios. This means the text has enough contrast from the background that it is on. You may think to yourself: Well of course the text has to be readable! Yes, but just because you can read that gray text on the slightly lighter gray background on this beautiful thing you’ve designed does not mean that everyone else can.
This is a much more common issue than most people think; I believe the reason for that is that the contrast ratio has to be quite a bit higher than we originally anticipated.
There are three levels of contrast ratios that the WCAG (Web Content Accessibility Guidelines) requires: AAA, AA, and A. A would be the minimum level of contrast. This is just scraping by and I honestly prefer to go AA and above. Normal text, likely your body copy, with a contrast ratio of at least 4.5:1 would pass AA standards while large text (bold or larger than 18 pixels) would need a contrast ratio of 3:1 or better.
Here is an example of just how close passing and failing can be:
Figure 1: Passing and failing can be very similar
Thankfully we don’t have to try and make sure these ratios are exact or better by our eyes alone. There are plenty of tools available that allow you to plug in colors to check that the ratio will pass WCAG specifications at different text sizes.
My personal favorite is Lea Verou’s Contrast Ratio app. This app is very clear, easy to read, and explains how it works. The app will give you the exact contrast ratio, as well as let you know if this ratio will pass AAA or AA guidelines for different text sizes. I use this all the time to test contrast with colors I’m using for a design.
Another thing you need to be aware of is text over images. If you have body copy over an image that needs to be readable, the contrast can be a little harder to get right. Very large text is usually not an issue. Later on I will give an example of how to make sure your text is still clear over a background image.
Graphical text that is inside of an image or asset that is not critical to the thing your audience is using does not need to adhere to these guidelines.
Typography hierarchy
Typography hierarchy plays an important role in designing for accessibility, as well. We talked about contrast but the hierarchy matters just as much. What do I mean by the hierarchy of your typography? This refers to the heading structure of your learning course, webpage, or document.
The size and weight of your headings will determine how visually accessible the document is. For example, using a large font size for your main heading or title should draw the attention of the viewer first before moving onto the second-tier heading, then third, and so on. This is what we refer to as visual hierarchy but this isn’t the only hierarchy we need to be concerned with.
There is also the structure of the content. Remember, we are designing for all visual impairments, which could also mean someone that is completely blind. A user who cannot see will rely solely on a screen reader, and a screen reader is going to require that headings be in order (from <h1> to <h6>.) If you are designing a user interface it is ok to change the look of specific headings to fit your design, but be sure that the proper heading tags are noted for the hierarchy of the page.
Later on, we will view examples of how to design headings for trickier parts of a user interface.
Keeping your designs aesthetically pleasing
Just because the guidelines require a really high contrast ratio doesn’t mean that your designs need to suffer for it. You can still create a beautiful UI while adhering to the WCAG guidelines. All it takes is a little creativity. In this section, I’ll show some examples of what you can do in specific situations to keep your designs looking great while still accessible.
Text over images
One thing that I like to do that works really well in a design is to add some sort of overlay on top of the image to darken it. This can still be problematic depending on your image, so to take it further, I will often put the text in its own little container with a slightly darker background.
Figure 2: A container with a slightly darker background can improve text readability
Monochromatic components
Sometimes we want to create components that have a monochromatic color scheme, meaning, they are made up of different shades of the same color. I do this often with notifications that let the user know something is ok, or there is an error. It draws attention to the component and looks a bit nicer than simply adding a colorful icon to a white background.
Figure 3: A light monochromatic background draws attention to a component
Both of these examples pass up to AAA WCAG guidelines.
Headings in tight spaces
What if we have a space in the course we’re designing where we need to make sure the heading is visible, but without making it an extra-large font size? A simple solution is to just set the font of the heading to bold so that it stands out a bit more. Again, this is just visual hierarchy. If the text is bold, it should stand out more than the body copy and draw the users’ eyes to that heading without having to make a huge, space-hungry piece of text.
In these two examples, if we keep the line-height proportional to the font-size, the heading with the larger size is going to force the height of this component to be a bit taller. This can come in handy when fitting a component into a smaller space but still giving a visual hierarchy.
Figure 4: Set your line height a bit larger and make the font bold to create a visual hierarchy
Conclusion
I hope this helps give an idea on how to keep your designs accessible while not sacrificing your visual creativity. Accessibility guidelines can feel like extra work at first, but if you think about it from the beginning, it’s easy to create beautiful, accessible courses, webpages, or applications as you go. This is incredibly important for people with vision impairments to be able to use the learning content that you designed without missing any details. Everyone should have access to content, no matter their physical condition.