Accessibility
What is the minimum colour contrast for website text?
WCAG 2.2 AA requires 4.5:1 for normal text and 3:1 for large text — 18.66px bold or 24px regular and above — plus 3:1 for interface components and meaningful graphics. Most body copy and most button labels are normal text, so 4.5:1 is the number that usually applies.
The thresholds, precisely
- Normal text
- 4.5:1 — anything below 18.66px bold or 24px regular.
- Large text
- 3:1 — 18.66px bold and above, or 24px regular and above.
- UI components and graphics
- 3:1 — borders, icons, focus indicators, chart lines.
- AAA (optional)
- 7:1 for normal text, 4.5:1 for large. Rarely required, sometimes worth it.
Why brand colours fail so often
Brand palettes are designed for logos and print, where contrast against small text was never a constraint. A mid-tone green that looks excellent on a business card frequently measures around 2:1 against white, which fails by a wide margin.
Measure, do not judge
On this site the WhatsApp button was set to the brand green and a code comment claimed it passed. Lighthouse measured 4.13:1 against a 4.5:1 requirement. It is now #0F7A6B at 5.23:1, with the measured ratio written beside the value so the next person does not repeat it.
The longer version
This answer is deliberately short. If you want the full treatment, Website accessibility, without the compliance theatre covers it in about 5 minutes — free, ungated, written from client work.
Who answered this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada and Pakistan — fifteen live client sites, six of them stores taking real payments. These answers come from those projects rather than from a content brief. More about how I work, or ask me something directly.