Check text against the background it actually appears on, including the different states a visitor encounters. A pale button label may be readable on a large monitor in one state and difficult to distinguish when the button is disabled, hovered or focused. Start with the service description, navigation, enquiry action and form messages a customer needs to complete a task.
An online contrast checker can compare two colours, but it is only one part of an accessibility review. Record the page and state being tested, and check the real design on different screen sizes as well as the colour values.
Understand the text contrast target
Under WCAG 2.2 contrast minimum, ordinary text generally needs a contrast ratio of at least 4.5:1 at Level AA. Qualifying large text has a 3:1 minimum; the criterion includes exceptions for incidental text, inactive controls and logotypes. “Large” has a defined meaning in the guidance, so do not assume any bold heading qualifies without checking its rendered size and weight.
Those figures apply to the text criterion, not every visible shape. Essential boundaries, icons and focus indicators can raise separate non-text contrast questions. A label passing against its button colour does not prove that the button’s edge or keyboard focus is distinguishable from the surrounding page. W3C’s non-text contrast guidance explains the separate conditions.
Measure the colours the visitor sees
Choose the foreground text colour and its immediate background with a trusted contrast-checking tool. Enter the actual colour values used by the design, then compare the result with the relevant criterion. A near miss should not be rounded up to a pass. Record the values, page and result so a designer can reproduce the issue.
For text over a photograph, a single sample may not represent every part of the background. Check the worst relevant area behind the words, including image crops on a phone. A solid background, suitably controlled overlay or moving the text outside the picture can make the design more dependable than relying on one pale portion of a changing image.
Transparency, gradients and different image crops can change the effective background. If the actual rendered colours are unclear, ask the person maintaining the site to inspect them rather than relying on a colour from a design mock-up.
Check the states that matter
Review links, buttons and form controls in their ordinary, hover, keyboard-focus, selected and error states where those states exist. A red error border alone may be missed by someone who cannot distinguish the colour; use a clear written message and make it possible to find the affected field. Our form feedback guide explains useful error messages.
Keep focus visible when moving through the site with a keyboard. A browser default outline may be removed or hidden by a sticky header, so test the actual page. Contrast alone does not establish that focus is visible, the sequence makes sense or the control works.
Make a useful handover for a change
Record the address, screen size, element, state, foreground and background values and the observed problem. For example: “Quote button, normal state: light text against the pale blue fill is difficult to read; the measured values are…” Use the actual values from your check rather than a guessed ratio.
Agree who can change the design and who will retest the service-to-enquiry journey. Recheck the surrounding page after a colour change: a darker link may help one background but become difficult to see on another. Avoid changing a brand palette across the site without examining where each colour is used.
The first-pass accessibility guide covers a wider set of preliminary checks. For a Formby, Freshfield or L37 website project, contact Formby Web Design with the affected page and customer task. A contrast result by itself is not a complete accessibility audit or a guarantee of compliance.
