In plain English
WCAG 1.4.3 makes your text readable. But a store is full of things that aren’t text and still need to be seen: the edge of a button, the outline of an input box, a search or cart icon, the ring that shows which element is focused. This rule says those need enough contrast too, at least 3:1, against whatever is next to them.
A pale-gray input border on a white background might be invisible to many people. If they can’t see where the field is, they can’t use it.
Who this is for
- People with low vision or aging eyes, who lose faint edges and light outlines.
- Keyboard users, who depend on a visible focus ring to know where they are, and a low-contrast ring is as good as none.
- Anyone on a glary screen or in bright sunlight.
What “good” looks like
Check the contrast of the boundary that defines each control, and of any icon that carries meaning.
Input border: #d0d3d9 on #ffffff = 1.4:1 ✗ too faint
Input border: #8a8d99 on #ffffff = 3.1:1 ✓ visible
Focus ring: 2px solid #1b4dff on #fff ✓ strong, obvious
Cart icon: mid-gray glyph, 3:1+ ✓ meaning is visibleWhere stores get it wrong
Very light input and button borders, focus outlines removed or barely visible, and thin monochrome icons in pale gray. Theme defaults are the usual source. It pairs closely with text contrast issues, so fix them together.