Return to site

Two tools for checking color accessibility and contrast

· color,Tool,web design

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. 

Many branding and identity guides include both hex and RGB codes, but if you need to convert your RGB colors (the codes you use in MS Office) to hex, you can use this simple web tool to do so or just Google "RGB to Hex" in Chrome and a native conversion tool appears.

Hex Naw

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."

A quick footnote: if you're looking for more tools on color, check out the @dataviztools Color page. Lots more recommendations on contrast, palette building, and more!

All Posts

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly