Darker cells mean a higher score for this topic on that metric.
LessMore
Last reviewed Sources & creditsMedia creditsMethodology
Quick answers
When should I pick WCAG contrast check?
When the story is: UI type, slide titles, poster captions, badge labels.
When should I avoid WCAG contrast check?
Skip it in cases like: judging brand hue alone without measuring the pair.
Who invented or popularised it?
WCAG contrast ratios; APCA research (Myndex) as a next-gen model
What does it encode?
luminance difference between foreground and background
Is it OK in ads?
Yes if one claim is visible at a glance in Meta, Google and retail print; otherwise link to a full figure.
Will a teacher accept it?
Yes for lab reports and poster boards if axes, units and a source line are present.
WCAG contrast check encodes values as luminance difference between foreground and background. WCAG contrast ratios; APCA research (Myndex) as a next-gen model.
In reports, ads and assignments it fits UI type, slide titles, poster captions, badge labels. Skip it when judging brand hue alone without measuring the pair.
Software
- Color.js — Compute contrast and color spaces in the browser or Node. · MIT · github.com/color-js/color.js
- APCA (SAPC) — Perceptual contrast model for modern displays - read the license before shipping. · AGPL-3.0 · github.com/Myndex/SAPC-APCA
- Leonardo — Generate accessible theme ramps with contrast targets. · Apache-2.0 · github.com/adobe/leonardo
- Bootstrap a11y docs — Documented contrast guidance shipped with a huge UI toolkit. · MIT · github.com/twbs/bootstrap
- Atlas SVG examples — Server-rendered examples you can read with JavaScript off. · CC0 examples · github.com/Tool-Lifes/viz-atlas
Exports
- Exports 1 — SVG
- Exports 2 — PDF
- Exports 3 — EMF/SVG into slides (no screenshots)
- Exports 4 — SVG for web, PDF for print
Accessibility
- Accessibility 1 — Never hue alone. Stack pattern, label and position.
- Accessibility 2 — 4.5:1 for text, 3:1 for large marks.
- Accessibility 3 — Short alt text on the chart; numbers also as an HTML table.
- Accessibility 4 — Motion only as emphasis. Honour prefers-reduced-motion.
WCAG contrast check: honour luminance difference between foreground and background, and switch when judging brand hue alone without measuring the pair.