Accessibility is a hot topic in design, because it is important to make content widely accessible to all people, including those with visual disabilities. In an effort to codify accessibility, the most well known standards are the WCAG.
WCAG stands for Web Content Accessibility Guidelines. These are design guidelines developed by the World Wide Web Consortium (W3C) to ensure that web content is accessible to people with disabilities. They give recommendations for making web content more accessible to users who may have visual and other disabilities, in an effort to make web content more legible to as many people as possible. Note that these are guidelines, there is no test per se, just guidance that, if followed, will provide for a more widely accessible user experience.
As many W3C standards are, these are somewhat mind numbing in their detail, however, following a few simple rules will help keep your design accessible.
As designers, we should always care about making our designs accessible, but it is crucial in situations where ADA (Americans with Disabilities Act) compliance is mandated, ie. government agencies and public sector organizations, businesses offering public accommodations, educational institutions, ecommerce sites, and organizations receiving federal funding.
It is also crucial when designing safety-critical systems, where a missed alert or notification might have negative affects, such as an uncontrolled thermal event. (Fun fact: the Three Mile Island nuclear plant incident happened due to a bad Human Machine Interface (HMI) design.)
In my work as an HMI designer, i've worked on safety critical systems, and now, in the realm of color, I will try to merge my experience with the two.
First, many stakeholders are concerned with color blind users; Approximately 8% of men and 0.5% of women worldwide have some form of color blindness. This means that around 4.5% of the total population is color blind. Red-Green color blindness accounts for 99% of that, so we mainly have to concern ourselves with Red-Green combinations.
The main forms of Red-Green color blindness are:
- Deuteranomaly (green-weak, the most common)
- Protanomaly (red-weak)
- Deuteranopia (green-blind)
- Protanopia (red-blind)
In these each case, the eye has a deficiency in perceiving either Red or Green as distinct hues. Since pure Red (255.0.0) and pure Green (0.255.0) are close in lightness values, without hue, their contrast is not that great.
So, the first answer is:
While novice designers have a tendency to use maximum values, there is actually a wide range of tints/shades that are perceived as Red or Green, and especially, shades can be used to add contrast. (Note: this is a trick that can be used for Yellow as well, since pure Yellow is very close to White in lightness).
The second answer is more comprehensive, and I will preface it with an example you see every day - stoplights. Stoplights are a problem for colorblind people, because they don't see the hue difference between the lights, so how come they don't run more red lights?
The answer is, positioning. Since colorblind people still see brightness, they can see which light is lit up, and so, they compensate by remembering that the Red light is on top and the Green light is on the bottom. This illustrates the most fundamental rule of accessible design:
This is a positive restatement of the WCAG color ruling, which is, never use color alone to signify change. The changing position of the active light helps to mitigate the problem.
I'll show you a real-world example of this; in this UI design, color is the predominant status indicator, so a color blind user could easily not see it. Notice on the right how the Red seems to stand out prominently... if you're not color blind?!
The issue here is sufficient contrast; there may be a slight difference in lightness, but it's easy to overlook. The same goes for the icon, which is different inside, but has the same round shape, making it easy to overlook.
Now, look at the improved design:
This clearly indicates the important status change with a prominent graphic change, making it easy to spot the outlier. Importantly, this works for the even larger population of impaired users, the visually impaired. (Like me, I'm pretty blind without my glasses!)
There are other color nuances with the WCAG regarding text legibility, but similar rules of thumb apply. Perhaps that will be the topic of a future blog post!
The use of color impacts a design in many ways, some are aesthetic and others in accessibility. While we designers enjoy using color aesthetically, we need to be aware of legibility concerns for color blind users, especially for mission-critical systems, where clear communication is paramount. There are lots of ways to check color contrasts for legibility other than my quick and scrappy way using desaturation, but the ultimate check is to reinforce your design with redundant contrast changes in form or position, so that color isn't forced to carry the burden alone.