Accessibility
How to fix colour contrast failures
Measure every text and control colour against its actual background with a contrast checker, then adjust lightness until it passes 4.5:1 for normal text or 3:1 for large text and interface components. Measure — do not judge by eye.
Before you start
- A contrast checker
- Your colour palette and the places each colour is used
The steps
-
Step 1: Run an automated scan
Lighthouse or axe lists failing elements with their measured ratios.
-
Step 2: Identify the real background
Not the one you assume. A semi-transparent overlay over an image has an effective colour you must compute.
-
Step 3: Check which threshold applies
3:1 for text at 18.66px bold or 24px regular and above; 4.5:1 for everything smaller. Most body and button text is normal size.
-
Step 4: Adjust lightness, not hue
Darkening or lightening preserves brand identity; changing hue does not.
-
Step 5: Re-measure after every change
A change that looks sufficient often is not. The number is the only thing that counts.
-
Step 6: Check the states too
Hover, focus, disabled, visited. Placeholder text fails constantly and is missed constantly.
-
Step 7: Test in forced-colors mode
Windows High Contrast overrides your palette entirely. Confirm the page remains usable.
-
Step 8: Record the passing values
In a comment beside the colour, with the measured ratio. It stops the next person undoing it.
Why brand colours fail so often
Brand palettes are designed for print and logos, where contrast against text was never a constraint. A mid-tone green that looks excellent on a business card is frequently around 2:1 against white, which fails by a wide margin.
A caution from this site
The WhatsApp brand green measured 4.13:1 on this site’s floating button and I wrote in a comment that it passed. Lighthouse said otherwise. The colour is now #0F7A6B at 5.23:1 — measure, do not assume, including when you are confident.
The background behind this
Website accessibility, without the compliance theatre covers the reasoning in about 5 minutes — free, ungated, written from client work.
Who wrote this
Anas Bin Masud builds e-commerce sites and does technical SEO for businesses in the UK, Canada, Ireland and Pakistan. These procedures are the ones I run on client work, written down rather than invented — including the ones where the honest answer is that the fix is not available on your current hosting.