Text color has low contrast

Why does it matter?

Low-contrast text is hard or impossible to read for people with low vision or color blindness, and for everyone on a phone in sunlight. WCAG asks for 4.5:1 for normal text and 3:1 for large text.

Who it affects: People with low vision or color-vision deficiency, older readers, and anyone on a phone in bright sunlight.

83.9% of the top million home pages had low-contrast text in 2026. WebAIM Million 2026

What does Lumtera flag?

Text whose color and background are both set in the content — the block editor's color controls or theme.json palette classes. When either color comes from the theme's stylesheet, nothing is reported, so the theme's styles never cause a false alarm here. Symbols and one-letter icons, such as "X" in a button named "Close", are measured at 3:1, as graphics, and are for review. Review mode's Whole page tab measures real contrast on the rendered page, theme CSS included.

Check ID color-contrast — use it to filter the content report or with wp lumtera issues --rule.

How do I fix it in WordPress?

Select the block and open Styles → Color. Pick a darker text color or a lighter background (or the reverse) until the editor's own contrast warning disappears. Normal text needs 4.5:1; large text (24px, or 18.66px bold) needs 3:1.

Example

<p style="color:#9ca3af;background-color:#ffffff">Offer ends Friday</p>

<p style="color:#4b5563;background-color:#ffffff">Offer ends Friday</p>

How do I check the fix?

1. Update the post. The issue disappears from the Lumtera Accessibility sidebar on the next check, and from the site report on the next scan.
2. Check the text and background colors with a contrast checker such as WebAIM's. Normal text needs 4.5:1; large text needs 3:1.