A search field and its arrows fade into the page
Field borders, icon buttons and the focus ring are drawn in colours too close to their background.
The problem
People with low vision can't find the search field, the carousel arrows or where keyboard focus is.
What happens The field, the arrows and the focus ring are all there, but barely visible. Read moreRead less
A store's header has a search field, and its home page has a product carousel with previous and next arrows. The search field's border is a pale grey line on white, so the field looks like empty space with some placeholder text in it. The carousel arrows are white icons. They are visible over a dark product photo but vanish over a light one. When you Tab to a link, its focus ring changes from white to a light grey that is hard to see.
Why it fails Each is drawn in a colour close to the one behind it. Read moreRead less
Each control is identified by something other than text: the field by its border, the arrows by their icon shape, and focus by its ring. Each of those is drawn in a colour too close to the one behind it. The border is #e0e0e0 on white, at 1.32:1. The arrows are #ffffff on a white photo, at 1:1. The focus ring is #c8c8c8 on white, at 1.67:1. WCAG 1.4.11 asks for at least 3:1 for the visual information needed to identify a control and its state.
Who is affected People with low vision, in sunlight, or on a dim screen. Read moreRead less
People with low vision can't find the search field to click into, or can't see that the carousel has controls at all. Keyboard users lose track of focus and can't tell which link Enter will follow. The same happens to anyone on a dim or low-quality screen, in bright sunlight, or using screen magnification, where the faint edge is all they see of a control.
What automation and AI miss A scanner checks text, not borders, icons or focus states. Read moreRead less
Most scanners check text contrast only. They don't measure a field's border, an SVG icon's fill, or the change between a control's focused and unfocused states. Icons over images are hardest of all: the result depends on which photo is behind them, and a carousel changes that photo every few seconds. A generated design can pass on the mock-up's background and fail on the real one.
Try it
Find the search field and the arrows, then press Tab.
Can you see where to type, how to change the slide, and where focus is on each surface?
Linen tote · 1 of 3
A recreated demo. The broken version is intentionally inaccessible.
The fix
Give each control's edge, icon and focus ring 3:1 against what is next to it.
- 1A field's border or fill needs 3:1 against the page around it.
- 2An icon control needs 3:1 against what is behind it, so put it on a solid backing over images.
- 3The focus ring needs 3:1 on every surface; add a halo where one colour can't do it.
.search-input { border: 1px solid #e0e0e0; /* 1.32:1 on white */ background: #fff;}.carousel-arrow { color: #fff; /* 1:1 over a white photo */ background: transparent;}:focus-visible { outline: 2px solid #c8c8c8; /* 1.67:1 on white */}:root { --control-edge: #767676; /* 4.54:1 on white */ --focus-ring: #1a4fd0; /* 6.83:1 on white */}.search-input { border: 1px solid var(--control-edge);}.carousel-arrow { color: #1a1a1a; background: rgb(255 255 255 / 0.92); border-radius: 50%; box-shadow: 0 0 0 1px var(--control-edge);}:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; /* A halo for dark surfaces */ box-shadow: 0 0 0 8px #fff;}@media (forced-colors: active) { .carousel-arrow { border: 1px solid ButtonText; } :focus-visible { outline-color: Highlight; }}Why this works
Each of these colours was picked to look light and quiet on the design's background. None of them reaches 3:1 against what is actually next to it, so the controls are visible only to people who already know where they are.
The field's edge and the focus ring now come from tokens that reach 3:1 or more on white. The arrows no longer depend on the photo: they sit on a nearly solid white disc, and a dark icon on white is 17.40:1. The blue ring is 6.83:1 on white but only 2.55:1 on a #1a1a1a banner. The white halo around it fixes that, because the ring contrasts with the halo and the halo contrasts with the dark surface.
Implementation decisions
A field doesn't always need a full border. A filled field with a clear underline, or a fill that reaches 3:1 against the page, also identifies it. Placeholder text does not: it disappears when someone types, and it is usually too pale itself.
Disabled controls are exempt from 1.4.11. So are browser controls you haven't restyled. Don't fail a control as "disabled" if it can still be clicked; make it actually disabled, or give it full contrast.
Measure against what is really next to the control, not against the page colour in the design file. For icons over images, check the lightest and darkest images the carousel can show, or give every icon a solid backing so the photo stops mattering. Outlines can be clipped by overflow: hidden on a parent, so leave room for the ring and its halo. Some component libraries set these colours in their own theme, so change the theme tokens rather than overriding each component.
Contrast is one requirement. A focus ring also needs to be visible at all (2.4.7), and the WCAG 2.2 AAA criterion 2.4.13 asks for a larger, stronger indicator. A ring that passes this guide is a good base for both.
Verify the fix
5 checks, no mouse.
Record the OS, browser and assistive-technology versions, the build, the date, and the actual result of each step. Repeat after the theme tokens or shared component styles change.
Limits
This is a starting pattern, not a guarantee for every application. Colour values and token names are examples; measure your own palette on your real backgrounds. A contrast ratio is a minimum, not proof that a control is easy to find. Check the complete pages with people who rely on it.
This is a recreated teaching example, not a finding about a named client. The code is a starting pattern: test it in your own product. No completed assistive-technology test is claimed here.
References: www.w3.org,www.w3.org
Keep this fixed as your code changes.
Turn guides like this into rules your coding agents and CI follow, then have the result retested with a keyboard and screen readers.