• Success Criterion 1.4.1
  • Conformance level A

Added and Removed Content Shown Only via Background Color

1.4.1 — Use of Color

Scenario

Setting

A fashion e-commerce site's checkout page

What’s wrong

Diff views (added/removed) shown purely by red/green backgrounds without +/– or labels.

Example 

<div class="cart-line" style="background:#fee2e2">Shipping: $12.00</div>
<div class="cart-line" style="background:#dcfce7">Item price: $34.00</div>
<!-- red = increased, green = decreased, no +/- or word -->

Why it matters

A shopper reviewing their updated cart can't tell whether the shipping cost went up or down before paying.

How to test

View a diff/comparison view in grayscale: if added/removed content is shown only via red/green backgrounds with no +/- symbols or labels, it fails.

How to fix

Add an arrow icon and the word "increased" or "decreased" alongside the background tint.

<div class="cart-line increase">Shipping: $12.00 <span aria-hidden="true">▲</span> <span class="sr-only">increased</span></div>

Outcome

A shopper spots the shipping increase immediately and decides to switch delivery options before checking out.

Who is affected

Colorblind shoppers who can't distinguish the pale red row from the pale green one.

Learn more

Related scenarios