Designing for Accessibility: Color & Contrast

Published in

UXcellence

6 min readApr 3, 2018

We can spend hours agonizing over just the right color for this or that element, tweaking our palette either through intuition or algorithm to find just the right blue. What we don’t always realize is that for a portion of our users, all that energy is wasted. Everyone’s eyes are different, thus everyone perceives color in different ways. That perfect color we spent so long choosing … it may look very different (or simply grey) to some users. Why not spend a little time agonizing over colors that will make your experience easier on the eyes and more clear in meaning?

Color contrast

If you’ve ever struggled to read something on screen because the text was too light or too dark, then you already know why color contrast is important. But in case you need further convincing, good color contrast improves the readability of your content for everyone in all kinds of situations:

outside in bright sunlight,
on old monitors and secondary displays (like TVs, Kindles, or projectors),
and for people with low or blurry vision (including situational vision deficiencies like allergies or just transitioning from a dark space to a bright space)

The gold standard for testing color contrast is the WCAG standard, which provides contrast ratio recommendations based on how the foreground and background colors compare. The baseline recommendation is at least 3:1, though you should strive to make large bodies of text meet the AA (4.5:1) or AAA (7:1) ratios at the very least. The best rule of thumb is that your main content should aim for AAA compliance, secondary content should be at least AA compliant, and supplementary text (like headings, pull quotes, captions, etc.) may go as low as 3:1.

As the contrast ratio increases, text is easier to discern from the background. Larger text, like headings, may not need to be as high contrast because the size or weight of the text can help improve its readability.

So how do you figure out the contrast ratio between two colors? There’s some math involved that includes converting each color to a relative luminance value then dividing those by a specific formula. Fortunately, you can keep your calculator stowed away, as there are plenty of tools to help you calculate contrast ratios, including:

Colorable on the web
Stark for Sketch
Contrast Mac app

Once you know how to calculate the contrast ratio, here are some strategies for nailing great color combinations:

Use tints and shades of a color by converting the color from an RGB or Hexadecimal value to HSL and adjusting its lightness value up or down. By adjusting only the lightness, you can explore lighter or darker variations of a color. I recommend using darker variations of bright colors for small link text, and lighter variations for accent borders or icons.
If you must work with garishly bright colors, adjust saturation to find flatter, calmer variations. Using a similar tactic to the above, convert your colors to HSL then lower the saturation value directly to get less visually harsh colors that are easier on the eyes.
Avoid using shades of grey over colored backgrounds. Instead, use white or black (depending on how light or dark the background is) with a touch of transparency. This way, the colors will complement each other but still have decent contrast.

As a side note: want to quickly convert colors to HSL? I built ColorBot to help convert colors between different formats, explore tints and shades of a given color, and make quick color palettes for sharing with others.

Quick tips for better color contrast

Use brighter, more vibrant colors as accent colors instead of background colors. (Think buttons, borders, and elements you want to draw attention to.)
You don’t have to stick with solid white and solid black. Just make sure that the contrast ratio between background and foreground colors is high enough to meet the standards.
Use HSL color values for more easily exploring variations of a specific color.
Adjust brightness, saturation, and transparency values to explore alternative options with more contrast.
Larger, bolder text can be easier to read even at lower contrast, so it’s okay to use less contrast with headings and larger text.

Meaningful colors

We often use color as a tool to convey status or meaning. A red background or border might denote an error. Green text may tell your user that an action was successful. Be careful not to rely solely on color to convey these messages, however, as those with color blindness may not see a distinction to understand your meaning.

Instead combine your use of color with shapes, icons, or textures to double down on your message. For instance, it’s common to use a colored circle as a quick status indicator in applications: a green circle might mean an item was approved or a service is up, and a red circle might mean the item was rejected or the service is down. To color blind users, there is little to no difference between a red and green circle. But a green circle and a red square? That’s a lot more obvious.

***Don’t do this!*** *It is much harder to tell which status means what when the only distinguishing characteristic is color.*

***Do this instead.*** *By using shapes as well as color, the status is clearly different even to color blind users.*

Similarly, you can use patterns or icons to augment colors in charts, graphs, and other images that differentiate elements based on color. As always with charts, be sure to provide a key that ties the color and pattern to the data it represents.

**Don’t do this!** It can be hard to discern differences between simple colors in a chart.

***Do this instead.*** *Adding something to visually differentiate the bars aside from color helps.*

Another common problem occurs when using colored borders on form fields to denote errors. While a red border may seem obvious to some people, it may not even register as different to others. Instead of relying solely on border color, supplement it with a message, icon, or both. (I’ll explore a lot more on making forms accessible in a future article.)

***Don’t do this!*** *A border alone won’t tell all of your users that there is an error.*

***Do this instead.*** *An icon near the field helps draw attention, and a clear error message tells the user what to fix.*

Quick tips for meaningful color

For small status indicators, use different shapes or icons for each state in addition to colors.
When using color to differentiate items in charts and graphics, add subtle patterns to each item to further distinguish them.
Using color backgrounds or borders to denote success and error messages? Add clear, concise text to convey the message and consider adding an icon that drives home the point.
Use more visual differences than color to denote links within larger bodies of text. Underlines are standard for a reason.

Simulating color blindness

It can be a helpful exercise to check your designs using color blindness simulators from time to time. These can show you what various colors (and color combinations) look like through the lens of different types of color blindness. Making them a part of your design workflow can open your eyes (no pun intended) to how other people see the world every day.

Color Oracle for Windows, Mac, and Linux
Sim Daltonism for Mac and iOS
ColorBlindness SimulateCorrect for Android
Colorblind Web Page Filter for the Web

Become a Design A11y

Now you’ve got a better idea of how color and contrast impact accessibility in your designs. Explore how other aspects of design can improve the accessibility (and overall usability) in the Design A11y series below:

Follow along on Twitter, RSS, or by subscribing to the monthly newsletter if you want reminders when each article in the series is published.

Originally published on March 24, 2018 at uxcellence.com.