Text contrast: 4.5:1 and 3:1
1.4.3 Contrast (Minimum) requires a contrast ratio of at least 4.5:1 between normal text and its background. Large text needs 3:1. Large means at least 18 point, or 14 point bold; in the browser that is roughly 24 px, or about 18.7 px bold.
Pure decoration, logo text and text on inactive controls are exempt. Ratios run from 1:1 (same colour) to 21:1 (black on white). Check your colours with our contrast checker, which suggests the nearest passing shade.
.hint { color: #999; background: #fff; }
/* about 2.8:1 */.hint { color: #595959; background: #fff; }
/* about 7:1 */Never rely on colour alone
Colour has its own criterion: 1.4.1 Use of Color. People who cannot tell red from green will miss a red error border or a green status dot. Always add text, an icon or a pattern.
- Links in running text: underlined, not just a different colour.
- Required fields and errors: in words (“required”, “Please check …”).
- Charts: label lines directly or use distinct patterns.
- Status: “Paid” next to the green dot.
Controls and graphics: 3:1
1.4.11 Non-text Contrast covers whatever you need to see to identify a control or understand a graphic: input borders, the tick of a checkbox, icons without text, lines in a chart. These need at least 3:1 against adjacent colours. A light grey field border on white often fails here. If a field is recognisable only by its fill, that fill needs the contrast against its surroundings.
Keep focus visible
Keyboard users need to see where they are at all times (2.4.7 Focus Visible). The most common cause of failure is one line of CSS: outline: none. Only remove the default focus style if you replace it with a better one.
WCAG 2.2 adds 2.4.11 Focus Not Obscured (Minimum): the focused element must not be entirely hidden by your own content, such as a sticky header or a cookie banner. scroll-padding-top keeps jump targets clear of a fixed header.
A solid 2 to 3 px outline with good contrast against the background works well, set via :focus-visible so it does not appear on mouse clicks. Try it out in our keyboard test.
*:focus { outline: none; }:focus-visible {
outline: 3px solid #16181d;
outline-offset: 3px;
}
html { scroll-padding-top: 6rem; }The outline appears for keyboard users, and jump targets stay visible below a fixed header.
Build contrast into your design system
- Define colour pairs, not single colours: “text on background”, “link on panel”. Note the ratio right next to each pair.
- Check every state: hover, focus, disabled, error, selected.
- Text over photos: put a dark enough panel behind it rather than hoping the image cooperates.
- Dark mode: check every pair again; ratios do not carry over by themselves.
- Transparency and gradients: measure at the weakest point.
Checklist
0 of 7 done
Your ticks stay in this browser tab only and are not stored anywhere.
Related WCAG criteria
- 1.4.1 Use of Color
- 1.4.3 Contrast (Minimum)
- 1.4.11 Non-text Contrast
- 2.4.7 Focus Visible
- 2.4.11 Focus Not Obscured (Minimum)
- 1.4.5 Images of Text
Tools and patterns for this
Frequently asked questions
Does logo contrast count?
No. Text that is part of a logo or brand name is exempt from 1.4.3. If the logo is a link, it still needs alt text.
Does disabled text need to meet contrast?
Text on inactive controls is exempt. Still make sure people can tell why a control is unavailable.
Is a subtle colour change on focus enough?
Often not. A slight shift in colour is hard to spot. A clear outline with good contrast is the safe choice.
Sources
How does your website do?
The free check tests your home page in two minutes. The audit decides all 55 criteria, by a person.