Text has low contrast on the live page

Why does it matter?

Most color comes from the theme, the Site Editor's Styles, the Customizer or page-builder global colors — not from a single post. Measuring the finished page catches low-contrast text in menus, buttons, footers and product grids, which a check of the post content alone cannot see.

Who it affects: Keyboard, screen reader and low-vision users — every visitor meets the page title, language, landmarks, keyboard focus, target sizes and zoom settings on every page.

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

What does Lumtera flag?

Checked in review mode's Whole page tab, in your browser, from the colors the browser paints, so theme and page-builder CSS are included. Text on a solid color below 4.5:1, or 3:1 for large text (24px, or 18.66px bold), is an error, with the ratio, both colors and a passing color to use, from your theme's palette when one passes. Text on a gradient is measured against its worst color under the text, and text on an image against the image's pixels behind it (reported when one pixel in twenty falls short); both are for review, as is text with a shadow that changes the result. Modern CSS colors, such as color-mix(), oklch() and lab(), are read as painted; a color that cannot be read makes the finding a review item, never a guess. Text in a collapsed panel is skipped, an icon beside the text is not taken for its background, and symbols and one-letter icons are measured at 3:1, for review. Images served from another address cannot be read by the browser, so they are a tip to check by eye; text over a video is for review. Disabled controls and their labels are exempt. Similar text is grouped; on very long pages the check stops when its time runs out and says so.

Check IDs page-contrast, page-contrast-image, as shown in review mode and saved results.

How do I fix it in WordPress?

Darken the text or lighten its background (or the reverse) until the ratio reaches 4.5:1, or 3:1 for large text (24px, or 18.66px bold). On theme parts these colors usually come from the Site Editor's Styles, the Customizer or the page builder's global colors. For text over an image or gradient, add a darker (or lighter) overlay, or give the text its own solid background, and check again at phone width, where the image is cropped differently.

Example

.site-footer a { color: #8a8a8a; } /* on #ffffff = 3.4:1 */

.site-footer a { color: #595959; } /* on #ffffff = 7:1 */

How do I check the fix?

1. Reload the page in review mode and run the Whole page tab again. The finding disappears once the rendered page passes.
2. Load the page and press Tab: a "Skip to content" link should appear first, and you should always see where focus is, even under a sticky header. Pinch-zoom on a phone, and check the browser tab shows a meaningful title.