Controls fade on hover, focus or press

Why does it matter?

An icon button that fades to light grey on hover, or a field border that disappears on focus, leaves people guessing what they are pointing at. For an icon-only button, the icon is the only thing that says what it does.

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, alongside the hover, focus and press text check. It reports controls whose icon, border or fill stands out by 3:1 at rest but not in one of those states. An icon-only button that fades is for review; a border or fill that fades while text still names the control is a tip. The same colors are grouped. Scheduled checks do not run it.

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

How do I fix it in WordPress?

Keep icons, borders and fills that show where a control is at 3:1 or more against the colors next to them in every state. Change the :hover, :focus or :active styles in the theme's CSS, or the builder's hover settings.

Example

.icon-button:hover svg { fill: #cccccc; } /* on #ffffff */

.icon-button:hover svg { fill: #333333; }

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.