• Success Criterion 1.4.3
  • Conformance level AA

Semi-Transparent Text That Fails the Contrast Minimum

1.4.3 — Contrast (Minimum)

Scenario

Setting

A car-rental site's checkout flow

What’s wrong

Semi-transparent text/backgrounds (opacity/alpha) computing below threshold.

Example 

.summary-total { color: rgba(0,0,0,0.4); background: #ffffff; }
<!-- the alpha channel drops effective contrast to roughly 2:1 -->

Why it matters

A renter reviewing the final charge before paying can barely make out the total amount against the white summary panel.

How to test

Measure text with any opacity/alpha transparency against what's actually behind it (not the nominal color): compute the effective blended contrast.

How to fix

Raise the alpha value until the computed contrast against the actual background clears 4.5:1 (about 15:1 here); never guess with a low opacity.

.summary-total { color: rgba(0,0,0,0.87); background: #ffffff; }

Outcome

The renter reads the final total clearly and confirms the charge before submitting payment.

Who is affected

Low-vision users, who need the final total to be one of the clearest lines on the checkout page, not the faintest.

Learn more

Related scenarios