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:

inactive-badge.png (80×376 px, 11 KB)

inactive-badges.png (35×258 px, 4 KB)

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.

lR1lt7i.png (726×1 px, 504 KB)

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

Badges - both highlighted.png (726×1 px, 488 KB)

Badges - unread messages.png (726×1 px, 488 KB)

Badges - nothing new.png (726×1 px, 488 KB)

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.

notif-icon-only copy 8.png (726×1 px, 488 KB)

notif-icon-only copy 9.png (726×1 px, 488 KB)