• Success Criterion 1.4.11
  • Conformance level AA

Ghost Button on a Photo With Contrast Below the Minimum

1.4.11 — Non-text Contrast

Scenario

Setting

A survey tool's question builder

What’s wrong

Ghost/outline buttons on hero images falling below 3:1.

Example 

.builder-hero { background-image: url('gradient-photo.jpg'); }
.hero-cta { border: 1px solid rgba(255,255,255,0.4); color: #fff; background: transparent; }

Why it matters

A survey creator scanning the builder's hero section can't tell where the 'New Survey' ghost button's outline sits against the busy photo.

How to test

Measure a ghost/outline button's border against the hero image or photo behind it at its lowest-contrast point: 3:1 minimum.

How to fix

Add a semi-opaque backing behind a ghost button over photos so its edge holds 3:1 against every part of the image.

.hero-cta { border: 2px solid #ffffff; background: rgba(0,0,0,0.35); color: #fff; }

Outcome

A creator spots the New Survey button clearly against the photo instead of scanning for a faint outline.

Who is affected

Low-vision users struggle to locate outline-only buttons whose border blends into a variable photographic background.

Learn more

Related scenarios