In one paragraph
Elements must meet minimum color contrast ratio thresholds means tested text did not satisfy the applicable contrast requirement in the observed state. Ordinary text generally needs 4.5:1, while qualifying large text needs 3:1 under WCAG AA. Measure the actual foreground and background, including opacity and state changes. A clean automated report does not establish contrast over every image, gradient, theme, or interaction.
Why it matters
Adequate light-dark contrast supports people with reduced contrast sensitivity and helps reading under varied conditions. It is not the same as choosing different hues: two visibly different colours can have insufficient luminance contrast.
WCAG 1.4.3 applies to text and images of text, subject to specified exceptions. Large-scale text is generally at least 18 points, or 14 points bold, with equivalent treatment for applicable scripts. In CSS units, those are approximately 24 px and 18.7 px. Do not confuse 18 px regular text with the 18-point threshold.
These are minimum thresholds, not targets to round upward. A computed 4.499:1 does not satisfy 4.5:1. Placeholder and hover text also require attention. Inactive controls and genuine logotypes have defined exceptions, but ordinary brand-coloured body text is not automatically exempt.
How WebAuditOS evaluates this finding
The supplied axe colour-contrast rule evaluates applicable rendered text and the background it can resolve. Serious impact maps to high severity in the documented integration. The supplied configuration uses 4.5:1 for ordinary text and 3:1 for its qualifying large-text cases.
Uncertain backgrounds can produce incomplete or needs-review results rather than violations. Those are not included in the described failures-only report. Source documentation also notes placeholder-specific coverage limits. A missing finding is not evidence that all image overlays or dynamically exposed text were measured.
How to fix it
- Inspect the flagged text in the exact rendered state. Record computed colour, font size and weight, background, transparency, and any overlay. The colour token alone may not describe the final composition.
- Determine the applicable threshold using actual delivered size and styling. Do not enlarge text cosmetically only to exploit the lower ratio while leaving the design hard to read.
- Adjust foreground or background using a reliable contrast measurement tool. For text over photographs or gradients, examine the least favourable relevant background areas, not one convenient sampled pixel.
- Review shared design tokens so a correction reaches related components. Preserve intentional state distinctions and verify that a change does not fix light mode while breaking dark mode.
- Test links, helper text, placeholders, validation messages, buttons, and selected or focused states. A body-text pass does not validate a control boundary or icon; WCAG's non-text contrast requirements are separate.
- Where necessary, provide a stable backing layer behind overlay text instead of relying on a photograph's current crop. Test responsive image crops and the composited colours.
- Review uncertain automated cases manually and, where possible, inspect the full incomplete-result output. The failures-only summary cannot substitute for that review.
- Rescan all relevant themes and component states, then assess readability at zoom and on representative displays. Meeting a numeric minimum remains a floor, not a guarantee every user finds the typography comfortable.
What the fix can break
Global colour changes can remove visual hierarchy or make controls appear disabled. Check meaning and state communication alongside the ratios.
Image overlays can pass in one crop and fail at another width. Store the accessibility expectation with the component, not only a screenshot.
Do not remove placeholder or help text merely to eliminate a measurement problem. Preserve useful instructions and apply the right contrast and labelling design.
Questions
Does ordinary text need 3:1?
Generally no. The AA minimum is 4.5:1 unless a specified exception or qualifying large-text treatment applies.
May I round 4.499:1 up to 4.5:1?
No. WCAG treats the ratio as a threshold without rounding into a pass.
Why was an image overlay omitted?
The engine may be unable to resolve one background and return a review result rather than a violation. Investigate it manually.
Which related checks help?
Review form labels, zoom restrictions, and the automation limits guide.
What severity does this get in the report?
High. An axe finding takes its severity from the impact axe reports for the element that failed, and the report maps critical and serious to high, moderate to medium, minor to low. This rule is declared serious in axe-core, so a failure arrives as high. That is why the panel above states a conformance level rather than a severity - for other axe rules it depends on what failed.