• 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 

.refill-form input { border: 1px solid #ccc; background: #fff; }

Why it matters

A patient with low vision scanning the refill form can barely tell where one input field ends and the page background begins.

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

A #6b6b6b border against white gives roughly 5:1 contrast, comfortably clearing the 3:1 minimum for UI component boundaries.

.refill-form input { border: 1px solid #6b6b6b; background: #fff; }

Outcome

A patient spots the medication field's edge right away instead of hunting for where to click.

Who is affected

Low-vision patients rely on the input's boundary to find and target the field, which this faint border doesn't provide.

Learn more

Related scenarios