# A search field and its arrows fade into the page

Source: https://easeweb.dev/learn/non-text-contrast
Topics: Colour and contrast > Controls and icons have enough contrast (WCAG 1.4.11)
The fix: Give each field an edge, and each icon control a colour, with at least 3:1 against what is next to it. Use a focus ring that keeps 3:1 on every surface, with a contrasting halo where one colour cannot. Set these as design tokens so they hold when the theme changes.
Test with: contrast measurement, keyboard, zoom, forced colors
References: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html https://www.w3.org/WAI/WCAG22/Techniques/general/G195

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.

## What happens

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 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 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

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.

## Before: edges, icons and focus in colours too close to the page

```css
.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 */
}
```

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.

## After: tokens that keep 3:1, and a backing for icons over images

```css
: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;
  }
}
```

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

1. Measure each field's border, or its fill, against the background next to it, and confirm at least 3:1.
2. Measure each icon-only control against what is directly behind it, including over the lightest and darkest images it can sit on.
3. Tab through the page in both directions on every surface (light page, dark banner, cards, footer), and measure the focus ring against the colours next to it.
4. Zoom to 200% and confirm the ring and its halo are not clipped by their containers.
5. Turn on forced colors, and confirm that fields, icon buttons and the focus ring are still drawn.

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.