Label Swatches with Contrasting Text

An easy way to add an accessibility feature into data viz style guidelines is to label the color swatches with what text colors have appropriate contrast for the background color. 

Here’s an example of how the Justice Innovation Lab lab does it in their Data Visualization Guide:

While I think they should check the contrast of black on the darker swatches so that it’s at least WCAG AA, labeling the swatches with use for black or white text is a handy tip that more guidelines should incorporate.

Justice Innovation Lab: https://knowledgehub.justiceinnovationlab.org/reports/JIL_Data_Visualization_Guide.pdf

---

Written By Amy Cesal