Recently, I had the privilege of speaking about accessibility (#A11y) and design at an event Phase2 hosted for Design Week Portland, along with our incredible Accessibility Lead, Catharine McNally. This article is based on some of the evening’s content, and specifically my presentation at the event.

A little over a year ago, the word “accessibility” was merely a buzzword that I had heard from developers periodically. Additionally, in my past education, it was not a concept I was taught nor was it a part of my day-to-day workflow as a Graphic Designer.

Now, however, it is a significant part of what I do and one of the many reasons why I decided to shift into UI Design. It encourages me to think with multiple hats on: be that Developer, UX Designer, Product Manager, etc.; but most importantly User. Today, I design with all users in mind—not just those that may be similar to me or fit a particular mold.

Why should you care?

So now that I am in UI Design, why should anyone care about accessibility? Even just from a visual standpoint, 1.3 billion people live with some form of vision impairment and approximately 8% of men and 0.5% of women are affected by some form of color blindness. In addition to these jaw-dropping statistics, there are some major reasons you should care. According to WebAIM (Web Accessibility in Mind), here are the 3 main reasons to create accessible web content:

  1. To improve the lives of people with disabilities
  2. To capitalize on the wider audience or consumer base
  3. To avoid lawsuits and/or bad press

Key Principles of Design Accessibility

Now that the value of accessibility is generally understood, connecting it to design is the next step. To do so, here are some key principles of design accessibility I’ve found to be crucial.

  1. Color Contrast: Neighboring colors have enough contrast to make them distinguishable
  2. Text Size & Weight: Text is legible & large enough
  3. Labels & Instructions: Clarifying what components mean and how to interact with them
  4. Alt Text: Describing an Image with text
  5. Keyboard Accessibility: Allowing for keyboard navigation without the need for a mouse or trackpad
  6. Limiting Motion/Animations: Restraining from the use of too many animations and/or effects like parallax scrolling or excessive movement
  7. Heading Order: Putting your “H” tags in proper order starting with 1 at the top and going down to 6 at the bottom for example
  8. Focus Indicators: Identifying current position or location on a screen

Color Contrast & Ratio

Out of all of these, Color Contrast is a key principle that I address more than any other principle. Thus, it will be the focal point from here on.

Simply put, Color Contrast is “the difference in luminance or color that makes an object (or its representation in an image or display) distinguishable”. This principle is quantified through two numeric values, often written from 1:1 to 21:1, where increasing numbers mean higher contrast, which is known as the Contrast Ratio. Black against white or white against black will get the highest ratio possible at 21:1.

Web Content Accessibility Guidelines

Most of the time, getting that ratio in design is incredibly difficult, which is why there are lower ratios that work perfectly fine, as long as they pass accessibility standards. These standards determine what passes, and are known as the Web Content Accessibility Guidelines. The goal is to provide “a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally”. Contrast ratios are scored with conformance levels, which are: Failing, A (Good), AA (Very Good) and AAA (Excellent). The important levels to remember are Failing: Less than 3:1 and Passing (AA): More than or equal to 4.5:1, which is a ratio I would recommend.

One other note to mention is that these conformance-level ratings are not only based on color, they are also based on text size and weight. So if the text is larger and/or heavier in weight, a lower ratio in color can possibly be used.

Examples

These are some examples of buttons with white normal text. The darker the blue gets, the higher the ratio and likelihood of passing the key conformance level of AA. (Note: Normal text: 16px in Regular weight and Large text: 18.66px Bold or 24px Regular or larger)

This responsive website design below illustrates body text that is passing (left image) and not passing accessibility (right image). Despite white text being more aesthetically pleasing from a design perspective, it does not pass accessibility. By changing it to black and bold, it passes. Black vs. white text can be a bit tricky, as black tends to pass accessibility more than white. I would recommend sticking to the numbers by using helpful tools like Web AIM Contrast Checker or Stark.

Takeaway

Accessibility and design are two words that have not always been linked together. In today’s world, however, they definitely should be. If every designer took a step back and demonstrated appreciation for diversity in all forms by doing something as simple as checking contrast ratios in their work, I know the design world would be better for it.  

Tools

Further Reading