Skip to:
Content

BuddyPress.org

Opened 3 years ago

Closed 3 years ago

#7347 closed enhancement (fixed)

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

Reported by: mercime Owned by: mercime
Milestone: 2.8 Priority: normal
Severity: normal Version:
Component: Toolbar & Notifications Keywords: has-patch has-screenshots
Cc:

Description (last modified by 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.

https://cldup.com/hco2xKA3xa.png

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

https://cldup.com/u-Hjzh9Uj8.png

Attachments (1)

7347.patch (1.5 KB) - added by mercime 3 years ago.

Download all attachments as: .zip

Change History (11)

#1 @slaFFik
3 years ago

  • Milestone changed from Awaiting Review to 2.8

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

#2 follow-ups: @johnjamesjacoby
3 years ago

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

#3 in reply to: ↑ 2 @netweb
3 years ago

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:

https://cldup.com/dLKZYA-Fyb.png
https://cldup.com/JT49HETvBr.png
https://cldup.com/qNWPjo9VEk.png

#4 in reply to: ↑ 2 ; follow-up: @mercime
3 years ago

@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.

https://cldup.com/r5ALvbTM-s.png

#5 in reply to: ↑ 4 ; follow-up: @netweb
3 years ago

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

Last edited 3 years ago by netweb (previous) (diff)

#6 in reply to: ↑ 5 @mercime
3 years ago

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.

#7 @mercime
3 years ago

  • Description modified (diff)

@mercime
3 years ago

#8 @mercime
3 years ago

  • Keywords has-patch has-screenshots added

#9 @DJPaul
3 years ago

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

#10 @mercime
3 years ago

  • Owner set to mercime
  • Resolution set to fixed
  • Status changed from new to closed

In 11248:

Accessibility: Improve color contrast of pending BP notifications bubble.

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

Note: See TracTickets for help on using tickets.