Text contrast under WCAG: the most common finding and how to fix it
Contrast is the difference in luminance between text and its background, expressed as a ratio such as 4.5:1. A higher value generally means better readability. WCAG defines minimum ratios according to the size and type of content; poor contrast is one of the issues we frequently encounter during audits.
A common problem: colour is judged by eye alone
Poor contrast often results from an attempt to create a subtle visual style. A designer chooses light grey text on a white background, and the result may look readable on a high-quality monitor.
The customer, however, may be reading it on an inexpensive phone, in sunlight, through a smudged screen, with tired eyes or with impaired vision—and the text may be difficult to read. This does not affect only people with disabilities: low contrast also reduces readability under everyday conditions.
Typical examples include grey guidance beneath fields, pale text on a coloured button, placeholder text used instead of an actual form label, or “secondary” text in the footer. They may look like minor design details, but they directly affect readability.
How to measure and assess contrast
Contrast is measured rather than estimated by eye, and WCAG 2.2 Level AA sets clear thresholds:
- Normal text: at least 4.5:1.
- Large text (roughly 24 px or 19 px bold and above): 3:1 is sufficient.
- Visual information required to identify controls, icons and focus states: generally at least 3:1. The criterion has a precise scope and exceptions, so not every decorative border needs to be assessed.
For many elements, an automated tool can calculate the contrast ratio between the text and background colours and provide a specific value. Gradients, image backgrounds, transparency and some element states may require manual measurement. This is why we supplement automated checks with human verification.
The solution is often a small adjustment to the shade, not a redesign of the website. It may be enough to darken grey from #999 to #595959, resolving the finding without a noticeable change to the appearance.
What measurable rules give you
- Text is easier to read even without an ideal monitor, lighting or vision.
- A measurable rule can be incorporated into the design system and continuous checks.
- Many findings can be resolved by adjusting a colour without rebuilding the interface.
Next step
Would you like to know where your website may have contrast problems? Contact us—a free initial scan will reveal the first automatically detectable issues and provide measured values for elements that can be evaluated automatically. The remaining combinations and interactive states can be examined through targeted manual measurement.