How Do I Check Website Colour Contrast?
Check real text and background colour pairs across normal, hover and error states, and fix contrast without relying on visual guesswork.
Part of our guide: What Is Website Accessibility?
Website colour contrast is the difference in brightness between foreground content and its background. Text can look stylish on a designer’s screen yet become hard to read in glare, at small sizes or for someone with reduced vision.
Use measurement alongside visual review. Saying that navy “looks dark enough” is not a test of the actual colour pair used on the page.
Check the rendered pair
Identify the text colour and the background directly behind it. Include transparency, overlays, gradients and images that change the effective background.
A brand palette contains individual colours, but contrast depends on combinations. A colour that works on white may fail on a pale photograph or a neighbouring tinted panel.
Start with the parts customers rely on: body copy, navigation, buttons, form labels and error messages.
Understand the text thresholds
W3C’s minimum-contrast guidance sets a 4.5:1 ratio for ordinary text and 3:1 for qualifying large text at WCAG AA. Large text has a specific definition; it is not simply whatever looks prominent in the design.
These figures do not cover every accessibility requirement or every kind of interface component. Do not claim a complete pass from checking paragraph text alone.
When the type size or weight makes classification uncertain, ask the accessibility reviewer rather than choosing the easier threshold.
Build a small colour-pair inventory
| Element | Pair to test |
|---|---|
| Main paragraph | Text against page background |
| Primary button | Label against button fill |
| Error message | Error text against its surrounding panel |
| Secondary link | Link colour against the actual surface |
| Image overlay | Text against the least favourable relevant area |
Record the measured value, the intended threshold and the proposed correction. Keep screenshots so the developer knows which state and location you mean.
This is a practical review record, not a substitute for a full component audit.
Test states people actually encounter
A button may pass normally and fail when hovered, focused or pressed. A dark theme may introduce a different set of combinations from the light theme.
Check selected tabs, validation errors and disabled-looking controls that remain interactive. Avoid using colour alone to communicate whether a field failed; a clear message is also needed.
Our contact-form error guide explains that part of the interaction. The keyboard checklist helps reveal states a mouse-only inspection misses.
Make the smallest effective design change
Possible corrections include a darker text token, a lighter background, a solid backing behind overlaid text or a different button combination.
For an illustrative garden business, pale sage text on a cream panel might be replaced with the approved dark brand colour while keeping the decorative sage elsewhere. The brand can remain recognisable without preserving every low-contrast pairing.
Do not solve a body-text problem by making every paragraph oversized. Correct the colour system and keep a readable hierarchy.
Recheck the shared components
If a token changes, inspect all components that use it. A fix on the homepage can create a different combination inside a dark footer.
Test narrow layouts and enlarged text too, because wrapping can move text over a different part of an image. The zoom and reflow guide covers that complementary check.
Record exactly which pairs and states passed. The accessibility overview puts contrast alongside structure, operation and alternatives.
A measured contrast improvement is valuable evidence. It is not proof that the entire website is accessible or that every visitor will find the typography comfortable.
Thinking about your own rebuild?
Tell us about your business, your current website and what you would like to improve. We will help you work out the next step.
