Day 98

Accessible chart color and contrast tips

24 Aug 2022

Some good practices when it comes to charts and data visualizations: use high contrast colors, avoid problematic pairings (red-green, blue-yellow), use symbols as well as colors...

Four versions of the same chart. They're showing the monthly rainfall in inches and comparing tropical vs arid during the different months of the year. The first version has low contrast and it is difficult to read. The second one has higher contrast, so it will be easier to read by most. This is especially important if the Increase Contrast setting in iOS is on. But still, it is red for tropical and green for arid. Green-red is a problematic paring of colors and some users could perceive those colors very similarly, making it very difficult to differentiate which line in the graph is for tropical and which for arid. The third graph tries to simulate this perception, where both colors look yellow-ish to the user. The fourth chart uses green for tropical and blue for arid, but it also adds shapes along the line for specific months. It is much easier for everyone to differentiate both lines. Using shapes is especially important if the user has the Differentiate Without Color setting on.

Some of you have asked me how you can support what I do. This would really help, and would be hugely appreciated:

  • Find these posts useful? Share them at work, on social media, or with anyone that might find them interesting. Let's spread the word!

  • Check out any of my apps or games: Xarra!, RetroRapid!, or Mestre!.

    • A download and a review go a long way. They're free by default. On the App Store, ratings and reviews really help more people discover them.

    • Finding any of them useful? If so, and if you can afford it, purchasing lifetime access to all features or subscribing lets me buy the coffee that keeps me caffeinated. Caffeine keeps me going to maintain the apps, bring in new features that I hope you'll love, and keep writing.

You may also find interesting...

When creating AXCustomContent objects for accessibilityCustomContent, you can specify the importance of the data. If it is high, it will always be presented by VoiceOver. You could potentially ask the user if that data is of importance to them.

iOS and Xcode provide a wide variety of tools and options to deal with color contrast ratios. From system colors, that automatically support Increase Contrast, to high contrast color and asset variants, and even a built-in contrast calculator.

If you use Color Sets in the Assets Catalog to define your color palette, make sure you enable variants for the Any, Light and Dark appearances and also High Contrast. You'll be able to define variations of the color that have better contrast.


Content © Daniel Devesa Derksen-Staats on Accessibility up to 11! is licensed under CC BY 4.0. License details