Level AA · WCAG 2.0
1.4.3 Contrast (Minimum)
Text needs a contrast ratio of at least 4.5:1 against its background — 3:1 for large text, from 18.66px bold or 24px regular.
Partly automated Some failures are detectable, others need judgement.
How it fails in practice
Light grey placeholder text at 2.8:1. White text on a brand colour that passed on the designer’s calibrated monitor and fails on a phone in daylight.
How to fix it
Measure, do not eyeball. Fix it in the design tokens rather than per component, so the next screen inherits the correction instead of repeating the mistake.
At a glance
- Level
- Level AA — the level EN 301 549 requires, and therefore the level the BFSG and the EAA are measured against.
- Principle
- Perceivable
- Guideline
- 1.4 Distinguishable
- Added in
- WCAG 2.0
- EN 301 549
- 9.1.4.3
- Automated check
- Partly automated
How to test it by hand
- Run an automated check first: the contrast of plain text on a flat colour is measured reliably, on every page.
- Then check what a tool cannot measure: text over photos, gradients and video. Sample the part of the background closest in colour to the text with a contrast analyser.
- Check the states too — hover and focus colours, placeholder text, error messages, text on buttons. Logos and disabled controls are exempt.
- Large text needs only 3:1: 24px regular or 18.66px bold, as the browser renders it — not as the design file specifies it.
In code
<!-- 2.85:1 — light grey on white -->
<p style="color: #999999; background: #ffffff">In stock</p>
<!-- 2.15:1 — white on amber -->
<button style="color: #ffffff; background: #f59e0b">Buy now</button><!-- 4.54:1 -->
<p style="color: #767676; background: #ffffff">In stock</p>
<!-- 5.02:1 -->
<button style="color: #ffffff; background: #b45309">Buy now</button>Partly automated
How far an automated check gets
A tool finds some failures here and cannot see the rest. A clean automated result means the checks that exist found nothing — not that the criterion is met. This is the gap that makes a green scan look like an accessible site, and it is where the keyboard agent, the agents still in development and a human reviewer do the remaining work.
Measured by axe on every page we render, in two viewports; where text sits on an image or a gradient, we measure the pixels behind the letters, and on one page per template the hover, focus and pressed states too. What cannot be settled is a question for a person, and a clean result is not a pass.
Rules that check this criterion
color-contrastInsufficient colour contrast
The rule ids are axe-core’s (version 4.14.0), the open-source engine our scan runs, and our keyboard agent’s — the names a report or a CI log will show. An underlined id has a page of its own here.
Where it matters most
The guides that list it among the criteria to check first.
- BFSG for online shops
- BFSG for banking and financial services
- BFSG for telecommunications services
- Shopware accessibility and the BFSG
- Shopify accessibility and the BFSG
- TYPO3 accessibility and the BFSG
- WordPress accessibility and the BFSG
Related criteria
Other criteria under the same guideline.
Further reading
-
Contrast checker
Free color contrast checker: test text (1.4.3), icons and controls (1.4.11) and links against WCAG 2.2 – and get the nearest colour that passes.
-
Contrast ratio
Luminance difference between two colours, from 1:1 to 21:1; body text needs at least 4.5:1, large text 3:1 (WCAG 1.4.3).
-
color-contrast
The axe rule color-contrast flags text below 4.5:1 (3:1 for large text). Common causes, a before/after code fix and how to test it by hand.
Find out which criteria your site fails
We scan up to 100 pages against WCAG 2.2 AA, send the keyboard agent through the page you name and email you the report — free, once, no strings.