• Success Criterion 1.4.11
  • Conformance level AA

Input Field Border With Contrast Too Low to See

1.4.11 — Non-text Contrast

Scenario

Setting

A pharmacy app's prescription-refill form

What’s wrong

Input borders below 3:1 against adjacent background (light grey #ccc on white) with no other boundary cue where boundary is required to identify the control.

Example

Try this on a pharmacy app's prescription-refill form: input borders below 3:1 against adjacent background (light grey #ccc on white) with no other boundary cue where boundary is required to identify the control.

Why it matters

Low-vision and color-blind people who need to perceive controls and meaningful graphics. The practical effect on a pharmacy app's prescription-refill form: they miss information conveyed only by color.

How to test

Measure an input field's border color against its background with a contrast checker: it needs at least 3:1 (common failure: light grey #ccc borders on white).

How to fix

The visual element (border, icon, indicator, state marker) must have at least 3:1 contrast against adjacent colors in every state.

Outcome

That one change on a pharmacy app's prescription-refill form means they read the text clearly against its background.

Who is affected

Low-vision and color-blind people who need to perceive controls and meaningful graphics.

Learn more

Related scenarios