Task update: This task is now invalid due to iterated design at T115845
Notification badges (originally deployed in T94634: A1. Quieter Echo notifications for Flow posts) display non-trivial information in white text over a medium-grey background (#c2c2c2). This provides insufficient contrast to be compliant with WCAG guidelines - at minimum level AA. 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.
