Color contrast on business websites: check the text people need to read
Compare text with the background it actually appears on. Start with prices, instructions and the controls customers need to finish a task.
A light gray label may look tidy in a design file and become difficult to read on the live page. Instead of debating whether it feels dark enough, measure the actual text and background combination. Keep the result beside the page you checked.
This article explains a few WCAG contrast concepts and a practical review routine. It does not estimate lost customers or revenue. A measured contrast result is useful evidence, but it does not establish that the whole site is accessible.
What the contrast ratio describes
W3C's Contrast (Minimum) guidance explains the contrast ratio between text and its background. WCAG Level AA calls for at least 4.5:1 for ordinary text, with a 3:1 threshold for large text. Keep the threshold tied to the text category being checked.
For this criterion, large text means at least 18 point, or 14 point when bold. Do not judge that category by how large a heading seems on your own monitor. Ask the person measuring the page to record the actual size and weight.
The criterion has exceptions, including logos and inactive controls. Ask a qualified tester about an exception rather than applying it to ordinary labels. Important instructions should not become difficult to read because someone described them as decorative.
Measure the live combination
Choose a contrast checker that accepts foreground and background colors. Ask your site editor to identify the colors actually used by the element. Enter those values and save the result with the page and text category. A swatch from an older brand guide may not match the site.
If text sits on a photograph or gradient, a single background swatch may not represent every part behind the letters. Have the tester inspect the real placement. Consider moving the text to a stable background if the composition makes a reliable check difficult.
Check the published version after an approved edit. A setting saved in the editor does not demonstrate what a visitor saw on the page. Keep the measured result and the observed placement together.
Start with the words that carry the task
Review prices, service conditions and the instructions beside forms. Include error messages and buttons a customer needs to use. A readable main paragraph cannot compensate for an unreadable instruction at the moment someone is trying to book or pay.
Try the route on a real phone too. This is an observation check alongside the measurements, not a replacement for them. Note the page and element if the text is difficult to distinguish. Share the finding with the person who can adjust the design.
Do not use color as the only explanation
Imagine a form that marks an error only by turning the field border red. A customer also needs information about what went wrong and how to fix it. W3C's Use of Color guidance explains that color should not be the only visual means of conveying information.
Add a clear message where appropriate and check how it is associated with the field. Keep the wording specific, such as Enter an email address, instead of Invalid. Ask an accessibility tester to assess the result beyond its color.
For charts or status displays, consider labels or patterns that make the meaning available without relying only on hue. Review the actual information the visitor needs. A legend with tiny low-contrast text may create another problem instead of resolving the first.
Fix the system, then inspect the exceptions
Ask the designer whether the same low-contrast combination appears across several pages. If it comes from a shared style, correct that style at its owner. Then check the important pages that use it. This avoids repeatedly fixing individual labels while leaving the shared cause in place.
Keep a short list of approved combinations for body text and other common uses. Include the background, text color, category and measured ratio. Do not approve a color by itself. The same gray can pass on one background and fail on another.
Keep contrast in the content workflow
When staff add a banner, button or new background image, include a contrast check in the review. Save the result with the change. Ask someone else to inspect the important task after the update so a local improvement does not hide a new problem.
The DOJ web accessibility guidance names poor contrast as a website accessibility barrier. Treat this as part of a broader task review alongside keyboard use, image alternatives and forms. Meeting one threshold does not certify the rest of the customer route.
Begin with the text that matters most to the next action. Measure it, repair a failing combination and retest the published page through the normal approval process. That leaves the next editor with a usable example and a record of why the colors were chosen.
Access Heroes may earn a commission if you buy a tool we recommend. You pay the tool's maker directly, and we always tell you before you sign up. This article is general information, not legal or tax advice.
Sources
Want help checking contrast on the pages customers use most? Book a free web accessibility check with TJ. He will look at your site with you and tell you what to fix first.
Comments