Test live pages Pro
Hover and focus contrast, and the carousel check
Find links and buttons that fade on hover, focus or press, and sliders that move on their own without a working pause button.
Updated for Lumtera 1.2.2 and Lumtera Pro 1.1.1.
Overview
These two checks run inside Lumtera Pro's page checks, at desktop width, after the keyboard and widget tests. There is no separate screen: findings appear with the page's other results under Lumtera → Checks → Page checks, and in client reports and the conformance report.
A browser only applies hover, focus and pressed styles to what the pointer or keyboard really touches, so Lumtera copies the page's own :hover, :focus, :focus-visible, :focus-within and :active rules and applies them to each link and button in turn. In each state it measures the text against its background, which needs 4.5:1 or 3:1 for large text, and checks whether icons, borders and fills that stood out by 3:1 at rest still do. Transitions are paused so colors are read as they end up, and everything is put back afterwards.
The carousel check looks for sliders built with Swiper, Slick, Splide, Glide, Owl Carousel, Flexslider or Bootstrap, or marked as a carousel in ARIA. It watches up to three per page for six seconds. If the slides change on their own, it looks for a pause or stop button, presses it and watches again. A slider with no pause button, or one that keeps moving, is reported as Needs review, because a few seconds of watching cannot prove it moves for longer than five. One that stops is listed as a tip, to confirm with the keyboard.
Why does it matter?
Most contrast checks look at a page at rest. But a button that turns pale gray on hover, or a link that loses its color when it has keyboard focus, is hard to read at the exact moment someone uses it. Sliders that change on their own move text away before some people finish reading it.
What do you get?
- Text contrast of each link and button when hovered, focused and pressed (WCAG 1.4.3).
- Icons, borders and fills that drop below 3:1 in those states (WCAG 1.4.11).
- Sliders watched for six seconds; if they move, Lumtera looks for a pause button and presses it (WCAG 2.2.2).
- Findings are marked Needs review or Tip, for a person to confirm.
How does it work?
-
Run a page check
Both checks run as part of each page check at desktop width. There is nothing extra to switch on.
-
Lumtera tries each state
It applies the page's own hover, focus and pressed styles to each link and button in turn, then puts everything back.
-
Fix the state styles
Each finding gives both colors and the ratio, and points to the :hover, :focus or :active styles, or the builder's hover settings.
Who is it for?
-
Buttons with hover effects
Theme and builder buttons often lighten or invert on hover. The check shows the ratio at rest and in the state, with both colors, so you can pick a hover color that still works.
-
Icon-only buttons
A search, menu or close button named only by its icon becomes hard to find if the icon fades on focus. Those findings need review; a fading edge on a button with text is a tip.
-
Home page sliders
Autoplaying hero sliders are common. The check tells you whether there is a pause button and whether it actually stops the slides.
Good to know
How it behaves, what it needs, and where its limits are.
- Plans and access
- Included in every Pro plan, as part of page checks. They need the same permission as the Lumtera reports, editors and administrators by default.
- Limits
- Up to 250 links and buttons are put through the states on each page. Similar findings with the same colors are grouped, with a count of the others.
- What it cannot see
- Stylesheets from other sites cannot be read by the browser, so findings on pages that use them are marked as possible. Hover effects added by scripts are not seen.
- Why findings need review
- WCAG 2.2.2 only asks for a pause when movement lasts more than five seconds, and six seconds of watching cannot prove that. State contrast is measured by emulating styles, not by a real pointer. A person confirms each finding.
- Never on a schedule
- Both checks need a browser, so scheduled checks do not run them, and they do not run at phone width.
Checks you will see here
-
WCAG 1.4.3 · AANeeds review
Text is hard to read on hover, focus or press
-
WCAG 1.4.11 · AANeeds review
Controls fade on hover, focus or press
-
WCAG 2.2.2 · ANeeds review
Carousel moves on its own
Questions
Something else on your mind? Contact support
Does the slider check slow down page checks?
Only on pages with a slider. The progress card counts down while it watches, and "Skip slider checks" skips the rest for that run.
Does pressing the pause button change my site?
No. It happens in a hidden copy of the page in your browser, which is thrown away afterwards. On a signed-in check, a pause button that reloads the page stops the check, and nothing is saved for that page.
Can I skip the slider check?
Yes. While a slider is being watched, the progress card shows "Skip slider checks", which skips them for the rest of that run. The other results for the page are kept.
More in “Test live pages”
-
Free
Whole-page review
Check a page the way visitors see it — theme, header, menus, footer and page-builder output — with {page_checks} checks for contrast, target size, keyboard and widgets.
-
Free
Keyboard walk and widget tests
Review mode's Keyboard tab numbers every Tab stop on the page, flags focus you cannot see, and opens menus, dialogs and tabs from the keyboard.
-
Free
Screen reader preview
See roughly what a screen reader lists on a page: headings, landmarks, links and form fields, plus the whole page in reading order.
Hover and focus contrast, and the carousel check
Get it with Lumtera Pro
In every Pro plan. Personal is $149 a year. Pro installs alongside the free plugin, and your settings and results stay.
14-day refund (opens in a new tab)Keeps working if you don't renew