Previously, I held a job for a large tech company working in quality assurance. I tested software from an end-user perspective to make sure things worked as intended when the code was changed. One of the most important and often overlooked aspects I tested was software accessibility. Accessibility can range from ensuring screen-readers pick up all text on the screen to checking that keyboard commands work. However, it also covers how your software and its graphics appear visually. Drawing from what I learned, I’d like to extend some tips to help make your designs widely accessible. The first design element I’ll be covering is color choice.
Color Contrast
One of the first things I learned to test for when considering accessibility was contrast. Like many programs, our software even had a “high contrast” mode. The point of high contrast is to make it easier for people with weaker or strained eyes to distinguish things like text or icons from the background. While it may be jarring at first, easily distinguishable colors put less stress on your eyes long-term. The minimum accepted ratio for high contrast colors is 4.5:1 between the foreground and background, according to WebAIM’s accessibility guide. However, there are different levels of contrast that correspond to different levels of accessibility. For instance, the Web Content Accessibility Guidelines says that a 7:1 ratio is necessary for a AAA level of contrast. Note that neither of these are legal guidelines for the private sector, but rather a best practice.
There are tools out there that make finding this ratio easy. I recommend using WebAIM or Colorable if you’d like an easy, browser-based tool.
Color Choice and Accessible Design for Colorblindness
Did you know that around 8.5% of the world’s total population is color-blind? It’s important to take this large group into consideration, especially when trying to communicate essential information to your audience. Since the most common type of colorblindness is the red/green varietal, avoid using green and red in conjunction with one another. Layering red text atop a green background might be difficult for a lot of people to read.
However, as there are several types of colorblindness, some designers suggest that using color alone to differentiate crucial elements is bad practice. For example, a clothing website might want to list the color options by name instead of swatches alone. A website that uses status notifications should make their icons different shapes as well as different colors. Using both patterns and color to distinguish segments on a map would make it easier to tell the sections apart. There’s a lot of ways to combine color with other design elements to make it accessible to that 8.5%!
When designing something with colorblind users in mind, it can help to simulate what colorblind people will see when looking at your work. Sim Daltonism is a great option for Apple users, while VisCheck offers a program that PC users can download.
A lot of these guidelines were made with web and software design in mind. However, it can’t hurt to keep some of these suggestions in mind when designing graphics for social media. When trying to build a brand, you need to send a clear message about yourself. People should be able to tell what that message is without struggling. If they can’t read the text or understand the graphics they’re presented, they’ll never be able to do that. It’s a small step you can take towards making the web friendlier and more accessible!
If you’d like to see more about graphic design, please check out the graphic design tag for our blog feed.
