Perceivable Guideline 1.4 Distinguishable

1.4.3 Contrast (Minimum)

Text must stand out from its background

Level AA 1 automated check

What it asks for, in plain English

Ordinary text needs a contrast ratio of at least 4.5 to 1 against whatever is behind it. Large text (roughly 24px and up, or 19px and bold) gets a lower bar of 3 to 1. The ratio is a maths formula based on how light each colour is, so two colours that look different to you can still fail.

It covers text in images as well as text on the page, and placeholder text in form fields. It does not cover logos, decorative text that carries no meaning, or controls that are switched off (disabled).

Light grey captions, placeholder text, thin coloured links on white and white text on a pale photo are the usual failures.

This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.4.3 page has the full intent, techniques and definitions.

Who it affects

Someone with low vision or an eye condition such as cataracts sees pale text melt into the background and gives up on the paragraph.

Anyone reading a phone outdoors in sunlight loses light grey text completely on a glossy screen.

Someone with a colour vision deficiency may see a red link on a green background as two almost identical greys.

Example

Broken

The grey paragraph is about 2.6 to 1 on white, the small print about 1.8 to 1. Both fail.

Fixed

Darker greys: about 10 to 1 and 7.6 to 1. Still grey, still readable.

Show the markup behind both examples
Broken
<style>body{margin:0;padding:18px;font-family:system-ui;background:#fff}p{color:#9aa3ad;font-size:16px;margin:0 0 6px}small{color:#b9c0c8}</style>
<p>Delivery is free on orders over a certain amount.</p>
<small>Offer ends on Sunday. Terms apply.</small>
Fixed
<style>body{margin:0;padding:18px;font-family:system-ui;background:#fff}p{color:#374151;font-size:16px;margin:0 0 6px}small{color:#4b5563}</style>
<p>Delivery is free on orders over a certain amount.</p>
<small>Offer ends on Sunday. Terms apply.</small>

How to check it

  1. Pick the lightest text on the page (captions, hints, placeholder text, footer links) and find its colour and background with the browser inspector.
  2. Put the two colours into a contrast checker. Normal text needs 4.5 to 1 or more, large text 3 to 1.
  3. Check text that sits on photos, gradients or coloured buttons, including hover and focus states.
  4. Switch to dark mode if the site has one and repeat; the failures are often different.

What Websight checks for 1.4.3

Websight runs this automated check for 1.4.3:

AA Text must have enough contrast with its background color-contrast Text needs enough difference in brightness from its background to be readable by people with low vision, or by anyone on a dim screen.

Websight's colour contrast check measures solid text on solid backgrounds and reports the ratio. It cannot measure text over photos or gradients and marks those as needing a person to look; that is on the manual checklist.

Practical tips

  • Pick a palette with two body text colours that both pass on your lightest background, and stop inventing new greys.
  • Placeholder text counts as text; make it as dark as a hint should be.
  • A thin font fails sooner than a heavier one at the same colour; test the weight you actually use.

Scan your page and see where 1.4.3 stands

Websight gives a score out of 100, explains each automated finding in plain English, and lists the checks a person still needs to do.

Add Websight to Chrome

Free scans, no account, nothing leaves your computer. Automated tools find only part of the problems; the extension says so on every report.