At our studio, one of the things we offer our clients is the knowledge and ability to design & build fully accessible websites. In a nutshell, accessible websites are websites that everyone can use, no matter what device or assistive technology they are using. When it comes to the visual design of a website, the way color is used to create accessibility on the web is one of the critical aspects for success.
According to the United States Web Design System, 4.5% of the population has some kind of color insensitivity.
Color accessibility on the web is determined by:
- Contrast Ratio: The color contrast ratio of the foreground and background, called the luminosity contrast ratio, is the first way to test if a color or color combination is accessible. The WCAG (Web Content Accessibility Guidelines) state that text and interactive elements should have a color contrast ratio of at least 4.5:1 for regular text and 3:1 for large text.
- Colors as indicators: Don’t use color as the only indicator for an action. For example, use an underline to indicate a link.
- Considering Color Blindness: Think about avoiding using reds or greens for “bad” and “good” indicators.
So how does this affect your design?
It most importantly affects all text. Any information that someone needs to read has to be accessible. Additionally, any actionable elements that require interaction also need to be accessible. Which means that most of your website’s colors need to be accessible.
Designers don’t panic!
This doesn’t mean you can no longer use bright colors, just do not use them as text or important elements. I have now worked on multiple accessible website designs and know first-hand it does not have to limit your design. With the right tools, it’s easy to check the colors you want to use and modify them if they don’t pass accessibility. Below is an example of a button that most of us may be able to read just fine. However, it will not pass accessibility, which means that some people would not be able to read it. This doesn’t mean you can’t use the teal color, just use your design skills to make some minor changes. By changing the text color to black, the button now passes accessibility.
Where can you use non-accessible colors?
Elements relevant for accessing, using, and understanding the content need to be accessible. Graphic elements that don’t support the functions of a website do not need to be. This can also include icons that are non-interactive and icons that are used adjacent to text that describes what the icon represents. Just make sure to add proper alt text to any image. However, when in doubt, label the element or make it accessible.
Tools we recommend
For testing accessibility, we look for the color contrast to pass the WCAG AA level. We also check normal text vs. large text. Normal text is considered 16px and regular and large text is considered 18px and bold or 24px and regular. These tools are what we have been using and find really helpful:
WEBAIM
Webaim is an online tool where you can enter the Hex codes of the foreground and background colors you want to use and see if they pass.
STARK
Stark is a plugin for the web design programs XD and Sketch. You can install the plugin and use it as you’re designing by simply selecting the element or elements you want to test. Stark will tell you if they pass or not and can identify whether the element is text or an object. They also have a color blindness simulator.
Using accessible colors benefits your website and your users and don’t have to limit your design. Here are a few websites we’ve designed lately that are fully accessible, including the Mcgovern Institute for Brain Research, the MIT Chemistry department, and the Alana Down Syndrome Center.
