Accessibility: Improve color contrast of pending BP notifications bubble in Toolbar

[mercime]

Current background color of the notifications bubble is #1fb3dd which has a contrast ratio of 2.46 -> way below the required 4.5 ratio for WCAG 2.0 AA conformance.

The image below shows the result of bumping the background color to #21759b (5.14 contrast ratio), the same color used for the spans on BP's member's account menu.

This second image shows an alternative background color for the notifications bubble -> #eee and font color to #000.

[slaFFik]

I like the new color (blueish, not #eee) more.

[johnjamesjacoby]

Can we match the colors used by WordPress's admin color schemes, and are those colors an acceptable contrast ratio?

[netweb]

Replying to johnjamesjacoby:

Can we match the colors used by WordPress's admin color schemes, and are those colors an acceptable contrast ratio?

Yes please, a couple of example screenshots:

[mercime]

@slaFFik @johnjamesjacoby @netweb Thank you all for your feedback.

Replying to johnjamesjacoby:

Can we match the colors used by WordPress's admin color schemes, and are those colors an acceptable contrast ratio?

Unfortunately, the current background colors for the span count in all the 8 WP admin color schemes have insufficient contrast ratios.

Even if the admin color schemes were to be updated to pass required contrast ratios, we still need to provide our own background color for our own span counts or better yet, add one of the class names used in admin menu for the span count in our markup.

Image below shows what happens when we remove the font and background colors from BP's admin-bar.css without adding the new class name to BP's span count.

[netweb]

Replying to mercime:

Replying to johnjamesjacoby:

Can we match the colors used by WordPress's admin color schemes, and are those colors an acceptable contrast ratio?

Unfortunately, the current background colors for the span count in all the 8 WP admin color schemes have insufficient contrast ratios.

In that case a WP core ticket should be created for this then

Even if the admin color schemes were to be updated to pass required contrast ratios, we still need to provide our own background color for our own span counts or better yet, add one of the class names used in admin menu for the span count in our markup.

Once the upstream core ticket is resolved we can then use that class throughout.

Edit: A class/style will also need to be added for the buddypress.org theme also

[mercime]

Replying to netweb:

Replying to mercime:

Replying to johnjamesjacoby:

Can we match the colors used by WordPress's admin color schemes, and are those colors an acceptable contrast ratio?

Unfortunately, the current background colors for the span count in all the 8 WP admin color schemes have insufficient contrast ratios.

In that case a WP core ticket should be created for this then

Yes, planning on doing that later this week unless there's already a ticket in WP core regarding the whole set of the 8 admin color schemes.

Even if the admin color schemes were to be updated to pass required contrast ratios, we still need to provide our own background color for our own span counts or better yet, add one of the class names used in admin menu for the span count in our markup.

Once the upstream core ticket is resolved we can then use that class throughout.

Edit: A class/style will also need to be added for the buddypress.org theme also

Pls disregard the class name scenario. I don't know what I did the other night, but reviewing the stylesheets used in color schemes for the wp-admin menu span count this morning, the selectors used were too specific to the admin menu for us to piggy-back on as-is.

[DJPaul]

If this is a good short-term fix, let's do it. I think we'll redesign these notifications menu in good time, anyway.

[mercime]

In 11248:

Accessibility: Improve color contrast of pending BP notifications bubble.

Props slaFFik, johnjamesjacoby, netweb, DJPaul, mercime.
Fixes #7347.