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.
Parts
- Mark — The core mark of WCAG contrast check is luminance difference between foreground and background.
- Scale — The scale must show zero (or a declared break) and units.
- Axis — Axis titles name the variable, not a mood.
- Legend — A legend is weaker than a direct label. Write beside the mark when you can.
- Label — Numbers are optional. If comparison is the job, label the ends only.
- Grid — Keep the grid faint. Data should own the ink.
- Annotation — One annotation sentence. Date the source.
- Frame — A thin frame. Never a 3-D box.
Variants
- Contrast ratio — Variant 1 of WCAG contrast check (Contrast ratio). Same encoding, different layout.
- APCA check — Variant 2 of WCAG contrast check (APCA check). Same encoding, different layout.
- Readable type color — Variant 3 of WCAG contrast check (Readable type color). Same encoding, different layout.
- WCAG contrast check 4 — Variant 4 of WCAG contrast check (WCAG contrast check 4). Same encoding, different layout.
Labels
- Axis — On WCAG contrast check, make Mark readable.
- Legend — On WCAG contrast check, make Scale readable.
- Label — On WCAG contrast check, make Axis readable.
- Grid — On WCAG contrast check, make Legend readable.
- Annotation — On WCAG contrast check, make Label readable.
WCAG contrast check: honour luminance difference between foreground and background, and switch when judging brand hue alone without measuring the pair.