Page MenuHomePhabricator

Inactive badge colors not compliant with accessibility guidelines
Closed, DuplicatePublic


The notification badge uses white text over a light grey background (#d2d2d2). This is not compliant with WCAG guidelines. This issue was already happening before the notification badge was divided (T108190) and still applies, both examples below:

Accessibility guidelines limit the range of colors we can use (for a good reason). It is especially challenging when trying to convey an inactive status while keeping text readable for everyone.

Exploring options

Adjust badge contrast

Contrast can be adjusted by using a very light grey as background (#F0F0F0) and a dark grey (#666) for text and icons. Regular text weight (not bold) can be used for the inactive status in order to make it slightly less prominent in order to compensate the contrast increase.

Use icons as the reference element
Keeping the badges as a secondary element makes them les prominent even when enough contrast is used.

Icon only
Removing the labels is another option to consider. It would be worth researching which value it adds to know the exact number of pending notifications.

Event Timeline

Pginer-WMF raised the priority of this task from to Needs Triage.
Pginer-WMF updated the task description. (Show Details)
Restricted Application added a subscriber: Aklapper. · View Herald Transcript
Pginer-WMF updated the task description. (Show Details)Sep 14 2015, 12:44 PM
Pginer-WMF set Security to None.

Partially a duplicate of T98526: Inactive notification badge colors not compliant with WCAG 2.0 accessibility guidelines - Could you update that task, and then merge this one into it?