Skip to content Skip to a section
A11Y Ways

WCAG contrast check

Check text-and-background contrast before you ship - the fastest accessibility win for slides, sites and posters.

At a glance
Score intensity

Darker cells mean a higher score for this topic on that metric.

Score profile

Each bar is a 0-100 atlas score for this topic, not a timeline.

964028358894
This form
This form
964028358894
Explore
Compare
15 min read

Last reviewed Sources & creditsMedia creditsMethodology

Open viz studio

× ✓
WCAG contrast check

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.

This page gathers anatomy, fit, craft, failure modes and work / ads / school recipes for WCAG contrast check.

FormWCAG contrast check
Since2008+
Encodesluminance difference…
Best forUI type, slide titles,…
Avoidjudging brand hue alone…
StudioWays

Profile

Clarity
96
Persuasion
40
Density
28
Craft cost
35
School fit
88
Work fit
94
964028358894

Seven chapters

Frequently asked questions

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.
Which tool?
Excel or Google Sheets or PowerPoint; export SVG/PDF.
How do I keep it accessible?
Do not rely on hue alone. Label directly and check greyscale.

Related

Studio → Which visual? Compare forms Make a visual from a file