Controls or icons are hard to see

Why does it matter?

A search box with a pale grey border on white, or a social icon drawn in light grey, can be invisible to people with low vision. They cannot see where to type or what a button is for, even when the text around it is perfectly readable.

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.

What does Lumtera flag?

Checked in review mode's Whole page tab, from the computed styles, so theme and form plugin CSS are included. It measures the border (or fill, when there is no border) of text fields, dropdowns and text areas, the edge of custom-drawn checkboxes and radio buttons, and the SVG icon of icon-only buttons and links, against the colors next to them. Below 3:1 is for review, with the ratio and both colors; similar controls are grouped (up to 20). Browser-drawn checkboxes, disabled controls, controls on an image or gradient, and fields whose wrapper draws a visible edge are left out.

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

How do I fix it in WordPress?

Give form fields a border (or a fill) and icons a color with at least 3:1 contrast against the background next to them. A light grey border on white, such as #ddd, is a common cause; #767676 or darker passes on white. These styles usually come from the theme's or form plugin's CSS, or the Site Editor's Styles.

Example

input[type="email"] { border: 1px solid #dddddd; } /* on #ffffff = 1.4:1 */

input[type="email"] { border: 1px solid #767676; } /* on #ffffff = 4.5: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.