Accessibility in Design: Color Choice

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.

Design 101: Fonts

Design is a critical element in most aspects of marketing, PR, and social media. It’s the thing that catches people’s attention and draws them in. It could be a book cover design, a flyer, or a graphic you plan to post on your social media feed. If you’re diving into designing things yourself, you’re sure to run into a very important choice at some point – what sort of font will you use? If you’ve never done it before, it can be intimidating. Many programs come with a set of default fonts that you can use freely when you’ve bought the license. However, this can be very limiting. People who have been designing for a long time can often recognize popular fonts on sight. If you want to use font effectively and stand out in whatever you’re making, here’s where to start.

What to look for in a font

The styles of fonts out there are endless- from creepy to elegant to academic, there is something out there that can fit your project perfectly. The first step is understanding what kind of a message you want to get across in your graphic. If you’re designing a book cover for a children’s series, you might choose something rounded and fun. For an invitation to a virtual event, you might want to choose something with looping, cursive-like elements. If it is a more casual event, something with a hand-written print look might be appropriate. If you’re unsure of exactly what you want, try a few different ones and see what fits the look of your graphic. Looking at examples of graphics you like and finding fonts that are similar can be a useful starting point when you’re at a loss.

Where to get fonts

I’m a huge proponent of DaFont, which is a repository of custom fonts where people with a passion for design can upload their work. It’s where I start my searches. Not only is it a large database, but it has fonts clearly sorted and labeled. There are distinct categories for every font to help you find the perfect one. The designers also put their usage terms upfront on DaFont. This is important because to legally use some fonts, you may need to purchase them beforehand. Some are only free for personal use but might require payment for commercial use. Others are 100% free for both personal and professional use. Some may not be used commercially at all! Make sure to check this out before even downloading the font. Beware of fonts that might imitate popular IP (the Harry Potter font is a popular one), since this could also land you in legal hot water. 

Google Fonts is also a place to find fonts that are licensed for both commercial and personal use. It has less choices in terms of categories and gets a bit more technical in its filter system. It is still a comprehensive resource, and you won’t need to worry about whether a particular font is licensed or not.

There are a lot of choices out there – so happy hunting! If you do plan on making your own graphics for social media use, make sure to check out our social media tag for helpful tips!