Colour contrast: when the text is there but nobody reads it

There is a fault almost every website has and almost nobody notices: text that looked fine on the designer's screen and disappears on the customer's. Grey that is too light on white. White type over a photo. A placeholder in a form field you can only guess at. This is not a matter of taste: there is a measure, there are thresholds — 4.5:1 for normal text, 3:1 for large text and controls — and colour must never be the only signal for a piece of information.

What contrast actually is

Contrast describes the ratio between the lightness of two colours. Not how colourful they are, not their saturation — their lightness. That is why a strong red on a strong green can look awful and still have the same contrast value as two tame greys.

The value is written as a ratio from 1:1 to 21:1. 1:1 is a colour on itself, 21:1 is black on white. It is calculated from the relative luminance of the lighter colour L1 and the darker one L2:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

You never have to calculate it yourself. But a feel for the scale defuses every discussion about brand colours: grey #767676 on white gives 4.54:1 — just enough for normal text. A slightly darker grey, #595959, reaches 7:1 and with it even the highest level. Between "just passed" and "comfortable for everyone" lie two digits in a colour value. It costs almost nothing, and it does not look worse.

The thresholds

The Web Content Accessibility Guidelines (WCAG) set at level AA:

What	Minimum contrast	Criterion
Normal text	4.5:1	1.4.3
Large text from 18 pt (24 px), or bold from 14 pt (about 18.5 px)	3:1	1.4.3
Controls, icons, focus indicators, graphics that carry information	3:1	1.4.11

The higher level AAA requires 7:1 for normal and 4.5:1 for large text. The benchmark for legal requirements is AA: in Germany the Accessibility Strengthening Act refers to the state of the art, which is the European standard EN 301 549, adopting WCAG at levels A and AA for web content. Hardly any grown brand palette reaches 7:1 throughout. AAA is worth aiming for — but a missed AAA is not a defect in the same category as a missed AA.

Why 4.5:1 of all numbers? It compensates for the loss of contrast that corresponds to roughly 20/40 vision — according to the W3C, the typical visual acuity of people around 80. So it is not a requirement for a small fringe group. It is the requirement for your oldest customers.

What else needs contrast besides text

This is where most websites go wrong, because hardly anyone looks. Criterion 1.4.11 requires 3:1 for everything you need to see to recognise and use a control:

• Form fields: if the border of an input is the only sign that you can type there, it needs 3:1 against the background. A light grey field on white is the classic.
• Checkboxes and radio buttons: the box has to stand out from the background — and the tick from the box. Often the box has good contrast and the tick is a delicate light blue.
• The focus indicator when tabbing through has to stand out from the background.
• Drop-down arrows on select fields, often the only sign that something opens.
• Standalone icons: an icon with text beside it is decoration. An icon without text carries the information alone.
• Charts, as far as you need them to understand the content.

A special case that is often reported wrongly: a button's border needs no contrast if the button is recognisable as a button without it — through its fill, its position, its label. Only when the border is the only marker does it become mandatory.

Colour must never be the only signal

This is a criterion of its own and the second big fault in this field. Criterion 1.4.1 (level A) says: colour must not be the only visual means of conveying information. Criterion 1.3.3 adds: instructions must not rely on shape, colour, size, position or sound alone.

The standard case is a form that marks required fields in red only. Anyone who struggles to tell red from green does not see the marking, submits the form incomplete — and gets the error message in red as well. The fix takes ten minutes: an asterisk in addition to the colour, and above the form one sentence explaining what the asterisk means.

<p>* Required field</p>
<label for="name">Name *</label>
<input type="text" id="name" name="name" required>

The same principle elsewhere:

• A link in running text needs a second marker besides its colour, usually an underline.
• An error message needs, besides the red border, text that says what is wrong.
• A status such as "done" or "open" needs a symbol or a word besides its colour.
• "Click the blue button on the right" is doubly problematic — colour and position.

Who it affects

About one in twelve men and one in 200 women has a colour vision deficiency, most often in telling red from green. It is not only those two colours — pairs such as green and brown or blue and violet become hard to tell apart as well.

Then there are groups people rarely think of when they hear the word accessibility:

• people with declining contrast sensitivity — the normal case from a certain age, not an illness.
• anyone using their phone outdoors. In sunlight a display's contrast drops noticeably.
• anyone with a basic or badly adjusted screen.

The sunlight case convinces fastest: it does not affect a minority but almost everyone — just some of the time.

What explicitly needs no contrast

• purely decorative text that carries no information.
• text in a logo or wordmark — your company logo does not have to meet the thresholds.
• disabled controls, such as a greyed-out submit button. It still should not be so pale that nobody notices it exists.
• text that appears in a photo but does not carry its message.

How to check it yourself

• Single colour pairs: TPGi's Colour Contrast Analyser, a free program with an eyedropper, or WebAIM's contrast checker online. Pick up the actual background colour rather than assuming white — very often it is a light grey, and that is exactly what tips a tight combination.
• A whole page: the WAVE browser extension marks contrast errors directly on the page. A good overview, but it does not find everything — nothing over images, above all.
• Colour vision deficiencies: Chrome simulates them in its developer tools under "Rendering". No extension needed.
• The whole palette at once: enter your colour values into a contrast matrix and see which text colour works on which background — ideally before the colours are spread across the whole website.
• Without any tool: the outdoor test. Phone, out the door, read your home page. Whatever disappears there is too weak.

The places with the most findings: placeholders in form fields, greyed-out help text, the footer in light grey on a light background, text on coloured buttons, text over images, the focus indicator, labels in charts and the hover colours of links.

What to do

Change the colour, not the font size. Larger type lowers the requirement from 4.5:1 to 3:1. Enlarging body text so that a grey that is too light passes formally hides the problem instead of solving it.

Work on the palette, not the single case. In a cleanly built website the colours live in variables. One change then works everywhere. Darkening individual passages leaves you with fourteen different greys after six months.

Pull problematic colour pairs apart in lightness. If red and green have to sit side by side, making them stronger does not help — one darker, one lighter does.

Text over images: a surface in between. A semi-transparent dark layer or a coloured block of its own for the text. That works whichever image is used later — and a different one will be used later. Contrast over photos cannot be measured reliably by a tool, by the way: white type is readable in one spot and not two centimetres further on. A person has to judge that.

Check while choosing colours, not afterwards. Checking while you decide means correcting one colour value. Checking afterwards can mean reworking a whole design.

And plan a buffer. The next version of the guidelines, WCAG 3.0, is still a draft, and its contrast method is explicitly not settled yet — but the draft assumes that font size and weight will count in future. Nobody should rebuild a website because of it today. But whoever is settling a palette right now had better not land exactly on 4.5:1.

Sources

• W3C, Understanding WCAG 2.2 — 1.4.3 Contrast (Minimum): thresholds, large text, exceptions, the 20/40 rationale: w3.org
• W3C, Understanding WCAG 2.2 — 1.4.6 Contrast (Enhanced): w3.org
• W3C, Understanding WCAG 2.2 — 1.4.11 Non-text Contrast: w3.org
• W3C, Understanding WCAG 2.2 — 1.4.1 Use of Color: w3.org
• W3C, Understanding WCAG 2.2 — 1.3.3 Sensory Characteristics: w3.org
• W3C, definition of contrast ratio and relative luminance: w3.org
• German federal accessibility portal — WCAG 2.1 and EN 301 549: barrierefreiheit-dienstekonsolidierung.bund.de
• W3C, WCAG 3.0 Working Draft — the contrast method is yet to be determined: w3.org
• Adrian Roselli, WCAG3 Contrast as of April 2026 — APCA was taken out of the draft in 2023: adrianroselli.com
• PubMed Central, study on colour vision deficiency — about one in twelve men and one in 200 women: ncbi.nlm.nih.gov
• TPGi, Colour Contrast Analyser: tpgi.com
• WebAIM, Contrast Checker: webaim.org
• WAVE, Evaluation Tool: wave.webaim.org
• Chrome for Developers, emulating vision deficiencies in DevTools: developer.chrome.com
• Accessible Color Matrix: toolness.github.io