• Success Criterion 1.4.5
  • Conformance level AA

Button or Navigation Label Rendered as an Image

1.4.5 — Images of Text

Scenario

Setting

A budget airline's flight search results

What’s wrong

Buttons and navigation labels as images.

Example 

<a href="/book"><img src="book-now-button.png" alt="Book Now"></a>
<a href="/deals"><img src="see-deals-button.png" alt="See Deals"></a>

Why it matters

A traveler who switches to a dark theme still gets the airline's original white-on-blue button image, which can be unreadable against that theme.

How to test

Try to select button and navigation label text: if it can't be highlighted because it's an image, it fails.

How to fix

Style real buttons with CSS backgrounds and borders so theme and contrast overrides still apply.

<a href="/book" class="btn btn-primary">Book Now</a>
<a href="/deals" class="btn btn-secondary">See Deals</a>

.btn-primary { background: #0b5fff; color: #fff; padding: 10px 20px; border-radius: 6px; }

Outcome

A traveler switches to their phone's dark theme and the booking button repaints correctly instead of staying stuck.

Who is affected

Users with low vision or color-sensitivity needs who rely on browser or OS themes can't restyle these image buttons.

Learn more

Related scenarios