Contrast and accessibility are important in visualization design, particularly as you design for an audience accessing your data on the web. Across browsers and devices, visuals can appear differently, and it's important to remember to be mindful to those who are color blind or visually impaired as you create your visualizations. We talk a lot about avoiding red and green (not terribly friendly to the colorblind), but contrast matters too!
A web design colleague shared two new (to me) tools for checking for color accessibility that may also be helpful if you're crafting your own color palette.
Accessible Color Matrix
Using the Accessible Color Matrix tool, you can use hex codes, which are used for identifying colors in website code, to set up your color palette with up to six different colors. Then, the tool analyzes the contrast between the different color pairings and identifies which ones can be layered together and which would be poor choices for accessibility. I love the simple visual layout that highlights the best and worst options for contrast within a given palette.
For those of you who routinely work more in Microsoft Office than in web design, hex codes are a sequence of numbers and letters that identify the color to be used on a website. RGB codes instead give you the different saturations of red, green, and blue that make up the color you want to display.
Hex Naw is a second color tool that tests for contrast and accessibility, and allows you to include up to 12 colors (double the number in the Accessible Color Matrix). The developers describe the tool as, "Hex Naw is a color contrast tool built for designers and developers. It's the one we wanted but couldn't quite find."
We just sent you an email. Please click the link in the email to confirm your subscription!
OKSubscriptions powered by Strikingly