Text is hard to read on hover, focus or press

Why does it matter?

A button that reads well at rest can turn pale on hover, or white-on-white when it has keyboard focus. Contrast rules apply in every state, and people see those states exactly when they are about to click.

Who it affects: Keyboard and screen reader users filling in forms, people with low vision who rely on clear hover and focus styles, people distracted or made unwell by motion, and anyone who finds their way around a site by its menus and help links.

What does Lumtera flag?

Runs in Lumtera Pro's Page checks (Lumtera → Checks → Page checks), at desktop width, on up to 250 links and buttons per page. Lumtera applies the page's own :hover, :focus, :focus-visible and :active styles to each one in turn, and reports text that drops below 4.5:1 (3:1 for large text) in a state, with the ratio at rest and in that state; the same colors are grouped. Each is for review. Styles set by scripts are not seen, and when some stylesheets come from another site and cannot be read, findings become tips. Scheduled checks do not run it.

Check ID page-state-contrast, as shown in review mode and saved results.

How do I fix it in WordPress?

Change the hover, focus and pressed colors so the text keeps at least 4.5:1 against its background, or 3:1 for large text. They are the :hover, :focus and :active styles in the theme's CSS, the hover settings in the Site Editor's Styles, or the hover tab of the page builder's button settings.

Example

.button:hover { background: #f2f2f2; color: #ffffff; }

.button:hover { background: #1e3a8a; color: #ffffff; }

How do I check the fix?

1. Run the page check again from Lumtera Pro's Page checks screen. The finding disappears once the page passes.
2. Submit the form with the required fields empty, using only the keyboard and then a screen reader: the errors should be announced, focus should move to them, and each message should say what to fix. Hover over and Tab to links and buttons to see that they stay readable, and compare the menus on a few pages.