What the standard says
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
Why it matters
This is the single most common failure on the web, on more than four out of five home pages. It affects everyone with reduced contrast sensitivity, which eventually means most people over sixty.
What a failure looks like
- failsGrey placeholder or helper text on white — the classic #999 on #fff is 2.8:1.
- failsWhite text on a brand colour that was chosen for a logo, not for body copy.
- failsText over a photo with no scrim.
- failsA disabled state faded so far that nobody can read what is disabled.
How to fix it
- doMeasure before you ship. Large text is 18.66px bold or 24px regular — everything else needs 4.5:1.
- doDarken the text rather than lightening the background; it usually preserves the design better.
- doOver images, add a solid scrim or a text shadow that itself meets the ratio.
- doFor disabled controls, keep the text readable and signal the state in words.
How A11ySignal checks it
1 automated check runs against this criterion on every scan.
seriouscolor-contrastElements must meet minimum color contrast ratio thresholds