Following the new feature deployed in {T94634},Notification badges (originally deployed in {T94634}) display non-trivial information in white text over a medium-grey background (`#c2c2c2`). This provides insufficient contrast to [[ http://www.snook.ca/technical/colour_contrast/colour.html#fg=FFFFFF,bg=C2C2C2 | be compliant ]] with [[ http://www.w3.org/TR/WCAG20/#visual-audio-contrast | WCAG guidelines ]] - at minimum level AA. This issue was already happening before the notification badge was divided (T108190) and still applies, both examples below:
{F2597817}
{F2597820}
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. we now have notification badges that display non-trivial information in white text on a medium-grey (#C2C2C2) backgroundRegular 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.
{F2597707}
**Use icons as the reference element **
Keeping the badges as a secondary element makes them les prominent even when enough contrast is used.
{F2598998}
{F2599002}
{F2599004}
**Icon only**
Removing the labels is another option to consider. This provides insufficient contrast to [[http://snook.ca/technical/colour_contrast/colour.html#fg=FFFFFF,bg=C2C2C2 |pass the WCAG AA rating]].It would be worth researching which value it adds to know the exact number of pending notifications.
{F2599007}
{F2599014}