Guidelines
Suggest edit

Apply the correct minimum contrast threshold to each chart element

For visual reading of charts, use element-specific contrast thresholds on chart text and geometries against adjacent backgrounds to improve accessibility and mitigate low-contrast reading failures for viewers with low vision.

  • purpose:refine
  • basis:accessibility
  • quality:accessibility
  • lever:encoding
  • channel:color-lightness:use
  • needs:low-vision
  • access:contrast:use

advice

Apply element-specific contrast thresholds

Test each chart element against its background and apply the threshold for that element type. For example, keep regular text above 4.5:1, keep large text and chart geometries above 3:1, and add a darker border to a light bar if its fill alone does not pass.

reason

Why minimum contrast thresholds work

Contrast determines whether readers can separate labels and marks from the page at all. Using the threshold that matches the element type prevents pale text and geometries from washing into the background during visual reading.

Mechanism: Element-specific thresholds preserve visible separation between chart content and adjacent backgrounds, so text remains legible and graphical marks remain distinguishable.

Evidence: Chartability treats low contrast as a critical accessibility failure and identifies it as the most common failure in its audits. The linked guidance sets regular text at at least 4.5:1 and large text and graphical objects such as chart geometries at at least 3:1 against adjacent colors, and the paper shows a light bar repaired by adding a darker border without changing its fill (Elavsky et al., 2022; Elavsky, n.d.; W3C, n.d.).

context

Use when evaluating visible chart elements

  • User Goal: Read chart text and distinguish graphical marks from the background.
  • Task: Visual identification of content.
  • Chart Setting: A static or interactive chart contains visible text or graphical marks placed on a background.
  • Audience: Viewers with low vision or anyone using a low-contrast display.
  • Success Criterion: Regular text exceeds 4.5:1 contrast, and large text and geometries exceed 3:1.

exceptions

Do not use one threshold for every element

Break it when: you treat large text or chart geometries as if they should be judged by the regular-text threshold alone. Why: the source uses a different minimum threshold for those element types, so that is not the applicable check.

costs

Tradeoffs of stricter contrast treatment

Sacrifice: Very light fills or faint text may need darker treatment or outlines. Risk: One palette choice can still fail if different text and marks sit on different adjacent backgrounds. Mitigation: Test each text style and each geometry/background pair separately.

mistakes

Common low-contrast audit mistake

Mistake: Check one foreground/background pair and assume the whole chart passes. Why it fails: regular text, large text, and geometries do not share one identical applicable threshold.

check

Check contrast on each element type

Failure Sign: Labels or marks visually blend into the background. Quick Check: Use a dropper and a contrast calculator on each text style and each mark/background pair. Stronger Test: Confirm that regular text exceeds 4.5:1 and that large text and chart geometries exceed 3:1.

fix

Fix low-contrast text and marks

  • Darken regular text until it exceeds 4.5:1 against its background.
  • Darken the geometry color or add a darker border around a light fill until the geometry exceeds 3:1.
  • Re-test each adjusted text style and each adjusted geometry/background pair with a contrast calculator.

References

Elavsky, F. (n.d.). High contrast for data visualization with examples – Observable. https://observablehq.com/@frankelavsky/high-contrast-for-data-visualization-with-examples
Elavsky, F., Bennett, C., & Moritz, D. (2022). How accessible is my visualization? Evaluating visualization accessibility with Chartability. Computer Graphics Forum, 41(3), 57–70. https://doi.org/10.1111/cgf.14522
W3C. (n.d.). Understanding Non-Text Contrast – WCAG 2.1. https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html