UXcellence Exploring excellent user experience

Designing for Accessibility: Color & Contrast

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.

An image of text with failing contrast. The foreground color is #999 and the background color is #CCC, with a ratio of 1.77 to 1.
An image of text with low contrast. The foreground color is #898989 and the background color is #EEE, with a ratio of 3 to 1.
An image of text with medium contrast. The foreground color is #6C6C6C and the background color is #EEE, with a ratio of 4.5 to 1.
An image of text with low contrast. The foreground color is #535353 and the background color is #F5F5F5, with a ratio of 7 to 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:

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.

Screenshot: The ColorBot website features a horizontal palette of the UXcellence colors at the top, a small form for quickly converting colors between hexadecimal, RGB, and HSL values, and additional tints and shades of the selected color.

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.

Animation: A table of server names with accompanying status symbols. Each symbol is a circle that can be either red, yellow, or green. The animation cycles through how someone with deuteranopia, protanopia, and achromatopsia would have trouble discerning differences in color on the symbols.
Don’t do this! It is much harder to tell which status means what when the only distinguishing characteristic is color.
In the improved version of the previous table, the symbols also have different shapes for each status, with a green circle, yellow triangle, and red square.
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.

Animation: Two frames compare a colored bar chart and a bar chart as seen in greyscale by someone with achromatopsia.
Don’t do this! It can be hard to discern differences between simple colors in a chart.
Animation: Two frames compare a colored bar chart and a bar chart as seen in greyscale by someone with achromatopsia. This time, patterns have been added to each bar so it's easier to tell them apart even without color.
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.)

Animation: A form with three fields, one of which has a red border because it contains an error. After two seconds, the same form is shown but the red border is now grey and the error is unclear.
Don’t do this! A border alone won’t tell all of your users that there is an error.
Screenshot: The form from the previous example has been fixed by adding an icon in the field (an exclamation mark inside a circle) and a message below the field that says, 'Please use a valid email address.'
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.

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.

Like this? Please share:

Explore more like this