Contrast requirements on the web — what does WCAG require?
Low contrast is one of the most common accessibility problems on the web — and one of the most concrete to fix, because the requirements are measurable. WCAG sets exact thresholds: 4.5:1 for normal text, 3:1 for large text and 3:1 for meaningful graphics and interface components. For the public sector and many private businesses these are legal requirements, not recommendations. Here we walk through what the numbers mean, who has to meet them and where things most often fail.
What does WCAG require?
Two AA-level criteria govern contrast. WCAG 1.4.3 covers text: normal text must have a contrast ratio of at least 4.5:1 against its background, large text at least 3:1. Large text is roughly 24 pixels, or 18.5 pixels if bold — the threshold reflects that larger characters remain legible at lower contrast.
WCAG 1.4.11 covers things that aren't text but still carry meaning: icons, charts, the border of an input field, the focus indicator around a button. Such graphics and component parts must have at least 3:1 against adjacent colours. This is the criterion that lets a nearly invisible form field or a light-grey icon fail the page, even when all the text passes.
The contrast ratio is calculated from the luminance of the colours using a formula in WCAG. As long as the background is a single colour, it is an objective measurement, not a judgement call.
Who is covered?
The Swedish public sector is covered by the Act on Accessibility to Digital Public Service (DOS-lagen), which points to the European standard EN 301 549 — in practice WCAG at levels A and AA. Since 28 June 2025, the Swedish Accessibility Act (2023:254) additionally applies to private businesses covered by the EU's European Accessibility Act: e-commerce, banking services, passenger transport and electronic communications, among others. The core is services aimed at consumers — pure B2B is not covered.
Common issues we see
- Light-grey text on a white background — the design trend that most often lands below 4.5:1. Body copy, helper texts and form placeholders are the classic offenders.
- Text placed on top of images or gradients — hero areas with the heading straight on a photo. The contrast varies across the surface, and parts of the text often end up against a background that is too light.
- Buttons and form fields with borders that are too faint — the field is barely visible against the background, failing 1.4.11 even when the text inside it passes.
- Icons that carry information on their own but sit below 3:1 — a light-grey trash can or arrow the user is expected to find.
- Focus indicators with too little contrast — the indicator exists, but doesn't stand out enough against the background.
Text on images — where measurement falls short
Against a solid background, contrast is pure mathematics. But when text sits on a photo or a gradient there is no single background colour to measure against — the contrast can be excellent at one end of the heading and non-existent at the other. Automated tools typically skip those cases entirely.
That's why many websites look "green" in a contrast checker yet still have headings that are hard to read in practice — the very surfaces that fail most often are the ones never reviewed.
How CompliantHQ tests this
The base scan — included in the trial as well — measures contrast programmatically on every scanned page, as part of an automated sweep of some sixty rules against WCAG 2.0/2.1/2.2 at levels A and AA. Text against a solid background gets an exact measured value against the 4.5:1 and 3:1 thresholds.
For text on top of images and gradients — where programmatic measurement doesn't work — the scanner takes a screenshot and lets a vision AI assess the legibility. The AI's conclusions are always reported as assessments, never as confirmed violations: you see where it suspects a problem and can judge for yourself.
How to fix it
- Darken the text or lighten the background until the ratio reaches 4.5:1 — contrast depends only on the two colours, so adjusting one side is enough.
- Place a dark semi-transparent panel or gradient behind text that sits on images — that gives the text a controlled background regardless of the photo.
- Give form fields and buttons clear borders with at least 3:1 against the background.
- Check every state — hover, focus and error styles don't automatically inherit passing colours.
- Bake the thresholds into your design system, so new components are born compliant instead of being patched afterwards.
What the check covers
- Text on top of images and gradients — where contrast can't be measured mechanically — is judged by vision AI on a screenshot.
WCAG criteria covered
- 1.4.3 Contrast (minimum) — text must have enough contrast against its background to be readable with low vision — light grey text on a white background is the classic failure. (AA)
- 1.4.11 Non-text contrast — things that aren't text — icons, input-field borders, parts of charts — must also have enough contrast to be distinguishable. (AA)
Common questions
What does a 4.5:1 contrast ratio mean?
It is the ratio between the luminance of the text and the background, calculated using a formula in WCAG. The same colour against itself gives 1:1, black against white gives the highest possible value. 4.5:1 is the threshold for normal text at AA level.
What counts as large text?
Roughly 24 pixels, or 18.5 pixels if the text is bold. Large text only needs to reach 3:1 instead of 4.5:1.
Do the contrast requirements apply to logos and decorative text?
No — text in a logo and purely decorative text are exempt under WCAG 1.4.3. But the exemption is narrow: a heading isn't decorative just because it's nicely styled.
Is an automated contrast checker enough?
For text against a solid background, yes — there the measurement is exact. Text on top of images and gradients can't be measured programmatically, because the background isn't a single colour. That requires a visual assessment — by an eye or a vision AI.
Want to see what we find on your site?
Run a free scan — all four modules included for 30 days, no card required.