Accessibility in Charts

On Color

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.

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.

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 you 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:

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.

On Navigating Through The Chart

When the screen reader is enabled, a user can navigate through the chart using the computer arrow keys and will describe the contents of the chart such as the x-axis, y-axis, and data points of the chart.

To view the chart we just created, feel free to display it using the following:

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
chart:Display()

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. We will be discussing what makes a good chart in the next section.

References:

[1]: Colorgorical. 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