• Success Criterion 1.4.3
  • Conformance level AA

Active Button Styled to Look Disabled With Grey-on-Grey Text

1.4.3 — Contrast (Minimum)

Scenario

Setting

An e-book reader's library page

What’s wrong

Disabled-*looking* styling applied to active controls' text (grey-on-grey but actually operable — no exemption applies).

Example 

button.buy-now { background: #e0e0e0; color: #a0a0a0; }
<!-- fully clickable and enabled, but styled to look disabled; no exemption applies since it isn't actually inactive -->

Why it matters

A reader assumes the "Buy Now" button is inactive and gives up on purchasing a book that was actually available the whole time.

How to test

Measure 'greyed out' styled text on a control that is actually still active/clickable: low contrast intended to look disabled still needs to meet the ratio since the control works.

How to fix

Reserve grey-on-grey styling for controls with the disabled attribute; an active control needs contrast that meets 4.5:1 (about 8.6:1 here).

button.buy-now { background: #2563eb; color: #ffffff; }
button.buy-now[disabled] { background: #e0e0e0; color: #a0a0a0; }

Outcome

The reader recognizes the buy button as active immediately and completes the purchase.

Who is affected

Low-vision users and anyone who relies on visual styling, rather than testing every button, to know what's clickable.

Learn more

Related scenarios