Color Accessibility on Charts

Accessible features include discriminable color palettes in order to provide better contrasting visualizations as well as screen reader enabling. Contrasting choices were developed through using the Colorgorical palette picker noting that the chosen colors compare to current industry standards by balancing the importance of discriminability and aesthetic preference [1]. Other colors can also be manipulated by user preference such as converting colors to grayscale, negatives, warm tones, or cool tones as well. This small example will feature code on constructing color palettes for a bar chart. By default, the palette on the charts is based off of the Colorgorical palette. We can view how colorgorical works here.

Other color palettes we considered were based off of the application between perceptual color properties (hue, chroma and lightness), palette composition (hue clusters, color frequency) and certain types of affect [2]. From this, the additional palettes were based off of eight affects, where four of them are core affects: Calm, Exciting, Positive, and Negative and four pragmatic affects: Serious, Playful, Trustworthy, and Disturbing. These affects relate the emotions users feel in relation to these palettes in order to have meaningful colors in data representations. Calm, Playful, and Positive palettes are in the lightest scales and most saturated while Serious, Disturbing, and Negative palettes are in the darkest scales and have more muted tones. Trustworthy palettes have more blue-green hues with a yellow to link, while Exciting had a similar palette, but more strongly saturated. The imporant aspect of this is learning how to give meaning to the colors we choose when creating our charts. These color palettes are focus more on the emotional design on viewers while maintaining discriminable palettes, similar to Colorgorical.

Tableau Color Palettes based off affects

To change the color we can simply call a function such as SetColorPaletteToColorgorical() from our chart component which is a color palette that focuses on making distinguishable color palettes, providing accessibility for visually impaired viewers. Other color palettes we are able to choose from are as follows:

SetColorPaletteToCalm()
SetColorPaletteToColorgorical()
SetColorPaletteToCoolScale()
SetColorPaletteToDisturbing()
SetColorPaletteToExciting()
SetColorPaletteToMagma()
SetColorPaletteToNegative()
SetColorPaletteToPlayful()
SetColorPaletteToPositive()
SetColorPaletteToSerious()
SetColorPaletteToTrustworthy()
SetColorPalette(Color A)
SetColorPalette(Color A, Color B)
SetColorPalette(Color A, Color B, Color C)

Here is example code of using the palettes which can be run on Quorum Studios:

BarChart chart = frame:BarChart()
chart:SetColorPaletteToCalm() // will create a softer and cooler color palette
chart: SetColorPaletteToColorgorical // uses the constructed color palettes references by article
chart:SetColorPaletteToExciting // will create a bright and vibrant color palette

Color palettes can be manipulated by the user to best fit contrast levels in relation to the data. Below we will have examples on what each color palette looks like.

Run the programs

SetColorPaletteToColorgorical()

Example of the Colorgorical Color Palette on Charts

SetColorPaletteToCoolScale()

Example of the Cool Scale Color Palette on Charts

SetColorPaletteToWarmScale()

Example of the Warm Scale Color Palette on Charts

SetColorPaletteToDisturbing()

Example of the Disturbing Color Palette [Tableau Research] on Charts

SetColorPaletteToExciting()

Example of the Exciting Color Palette [Tableau Research] on Charts

SetColorPaletteToMagma()

Example of the Magma Color Palette on Charts

SetColorPaletteToNegative()

Example of the Negative Color Palette [Tableau Research] on Charts

SetColorPaletteToPlayful()

Example of the Playful Color Palette [Tableau Research] on Charts

SetColorPaletteToPositive()

Example of the Positive Color Palette [Tableau Research] on Charts

SetColorPaletteToSerious()

Example of the Serious Color Palette [Tableau Research] on Charts

SetColorPaletteToTrustworthy()

Example of the Trustworthy Color Palette [Tableau Research] on Charts

Test out the different types of colors with the data being presented. Note that this chart may not fit the format of what to consider with making good charts.

References:

[1]: Gramazio CC, Laidlaw DH, Schloss KB. Colorgorical: Creating discriminable and preferable color palettes for information visualization. IEEE Trans Vis Comput Graph. 2017 Jan;23(1):521-530. doi: 10.1109/TVCG.2016.2598918. PMID: 27875168. https://ieeexplore.ieee.org/document/7539386.

[2]: Lyn Bartram, Abhisekh Patra, and Maureen Stone. 2017. Affective Color in Visualization. In Proceedings of the 2017 CHI Conference on Human Factors in Computing Systems (CHI '17). Association for Computing Machinery, New York, NY, USA, 1364 1374. DOI: https://doi.org/10.1145/3025453.3026041.

Next Tutorial

In the next tutorial, we will discuss accessible navigation, which describes how to use keyboard navigation and screen reader with charts.