Skip to main content

Accessible By Design

02-19-18 Andrew Spencer

Accessibility is an important consideration of building a better web. Andrew shares what to think about and tools to use when creating a visually accessible web.

At Sparkbox, we strive to build a better web and one of the ways we do that is through caring about the web experience for all users—including sighted users with vision impairments.

As web designers, we should focus on the needs of users with visual impairments, such as color blindness and low vision, especially when you consider that vision loss becomes more and more common as people age. Designers, however, should consider how their work will be seen by all sighted users, no matter the condition of their vision.

Educate Yourself

To avoid being overwhelmed by the broad topic of accessibility, it is helpful to start small and be consistent. Read articles, try a color blindness filter, ask questions, and tell others what you learn. By doing so, you will gradually improve the accessibility of the work you touch.

It’s important to note that not every client or organization that you work with is going to value accessibility in the same way. Some will see it as vital, while others may not be familiar with it. It’s then our job to educate others on the importance of always covering the basics of accessibility. From there, it can be up to the client on how deep they want to dive into the world of accessibility.

Start With the Basics

Vision impairment is one of the most common disabilities for web users, and visual accessibility is something we should be watching for from the moment we open our go-to design tools. It starts with an essential principle of design: contrast.

Color Contrast Example
An example of color contrast ratings. If colors pass, they receive either a AA or AAA rating. AA accounts for 20/40 vision and AAA is 20/80.

On the web, this has less to do with using complementary colors or colors with different hues (red versus green) and has more to do with the lightness/darkness or luminance of a color. This helps to account for color blindness where it is harder to distinguish between hues.

To ensure everyone can use the sites we design, be sure to use strong contrast when you are distinguishing between two elements. Web Content Accessibility Guidelines(WCAG) determines ratings for color contrast that can be easily found with some of the tools listed below. If you want to know more about how web color contrast is calculated, take a look at this article.

Contrast is especially important when it comes to typography. Font choice, type size and weight, line length, and leading (vertical space between lines of text) all have a huge impact on accessibility. If the content of your site is too small or the lines are too long, it will decrease legibility for all users, not only those with visual impairments.

Here are a few rules of thumb to get you started:

  • Avoid using type that is smaller than 16px, especially for important information.

  • Try to keep your paragraphs of text to between 40 and 75 characters long and don’t be afraid to increase the type size and leading.

  • Look at how the type will appear on a phone versus a large desktop and make adjustments as needed. Typically, as your font size gets smaller, the relative spacing between lines should increase.

An example of the effect of using proper line length, font size, and line height.
Font size, line height, and line length all help make a better reading experience.

Setting up strong typography now will save time down the road. Remember, treat these as guidelines, knowing that things like line length will always change in the wild world of responsive browsers.

Pushing Towards Better Solutions

Sometimes these guidelines can feel constricting but accessible design does not equal unappealing design. There can be a balance and healthy tension between accessibility and boundary-pushing design. Oftentimes, this leads to more creative solutions that are accessible to everyone, regardless of vision ability.

Constraints are actually a good thing. When accessibility rules start to feel constricting it’s helpful to take a step back and remember that the goal is to design great experiences for all users, and a design that doesn’t accomplish this goal is a design that has essentially failed its purpose. There’s a time and place for low contrast and small typography, but the main content on your website is probably not the right application. It’s important to distinguish between decorative elements, where accessibility rules don’t apply, and the actual content of your site.

Tools

For designers, there are numerous tools that we can use to double-check our design decisions for visual accessibility before ever writing a line of code. Here are a few tools we use at Sparkbox:

Colorable

Colorable is a web-based contrast test for color palettes. It is helpful when testing a large volume of colors or creating a new palette.

An example of the Colorable tool.

Sketch Color Contract Analyzer

Sketch Color Contrast Analyzer does what it says it does. It is really helpful for quickly testing contrast between two elements from within Sketch. Keyboard shortcuts come in handy here.

An example of the Sketch Color Contract Analyzer tool.

Color Oracle

Color Oracle is a free color blindness simulator that essentially filters your screen so you can test your design against a variety of color vision impairments.

An example of the Color Oracle tool.

Hex Naw

Hex Naw works great for quickly testing multiple color values against each other and is a great tool to start with.

An example of the Hex Naw tool

Let’s Do This

We’re all learning here. Web accessibility can be a daunting and complex topic, but it is important that we don’t shy away from it. Don’t wait until the last minute to check things like readability and color contrast. Educate yourself, try things, and continue to improve your accessibility chops. Together we can make better web experiences for all.

Related Content

See Everything In

Want to talk about how we can work together?

Katie can help

A portrait of Vice President of Business Development, Katie Jennings.

Katie Jennings

Vice President of Business Development