• Success Criterion 1.4.1
  • Conformance level A

Calendar Availability Shown Only Through Colored Cells

1.4.1 — Use of Color

Scenario

Setting

A professional networking site's profile editor

What’s wrong

Calendar availability shown only via colored cells.

Example 

<div class="cal-cell" style="background:#bbf7d0"></div> <!-- available -->
<div class="cal-cell" style="background:#fecaca"></div> <!-- busy, no text in either -->

Why it matters

A professional setting their own booking availability in the profile editor can't tell which calendar cells are already marked busy, so they accidentally leave a double-booked slot open to mentees.

How to test

View a calendar's available/unavailable days in grayscale: if color is the only distinguishing feature, it fails.

How to fix

Add a visible or screen-reader label to every cell state, not just a background color.

<div class="cal-cell available"><span class="sr-only">Available</span></div>
<div class="cal-cell busy"><span class="sr-only">Busy</span></div>

Outcome

The professional confirms each slot's status at a glance while editing their calendar and avoids double-booking two mentees into the same time.

Who is affected

Colorblind users editing their own availability calendar, who can't reliably tell the pale green cells from the pale red ones at a glance.

Learn more

Related scenarios