Skip to main content

Pro page tests

Errors are shown by colour alone

WCAG 2.2 success criterion 1.4.1 Use of Color (Level A)

WCAG 2.2
1.4.1 Use of Color
Also maps to
3.3.1 Error Identification
Level
A
Default severity
Needs review
Available in
Pro

Updated for Lumtera 1.2.2 and Lumtera Pro 1.1.1.

Why does it matter?

A red border is the only sign of an error on many forms. People who cannot tell red from grey, and screen reader users, cannot see which fields need fixing.

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?

Found by Lumtera Pro's form tests (the Forms card of Lumtera → Checks → Page checks, "Test form"): an empty required field that changes color after the submission (its border or background) but has no text message of its own. For review; fields with the same problem are grouped. Nothing is sent: a safety guard stops any email, form entry or order while the test runs.

Check ID form-error-color-only, as shown in review mode and saved results.

How do I fix it in WordPress?

Show a text message next to each field with an error, for example "Enter your email address", not only a red border or background. An icon can help, but it needs text too. Check the form plugin's settings for inline error messages.

Example

Flagged on the rendered page
.field-error input { border-color: #d63638; } /* and no message */
Fixed
<input id="email" aria-invalid="true" aria-describedby="email-error">
<p id="email-error">Enter your email address.</p>

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.

Check your pages with Lumtera

This test is part of Lumtera Pro, on every plan. It runs from the Page checks screen on the pages you choose, in your own browser, on the same engine as the free review mode.

Start with the free plugin today

All 69 content checks and 33 whole-page checks, fixes you approve with undo, and the site report — free, with no account and no page limits.