Skip to:
Content

bbPress.org

Opened 3 years ago

Last modified 2 years ago

#3003 new defect

Accessibility: Contrast issues with links in reply header

Reported by: Robkk Owned by:
Milestone: Under Consideration Priority: normal
Severity: normal Version:
Component: General - Accessibility Keywords: has-screenshots has-patch
Cc:

Description

While experimenting with this wA11y accessibility toolbox plugin I found in the WordPress plugin repository, I started messing with it and checking out for some bbPress accessibility issues.

One that I came across that seemed quite obvious, is a contrast issue with the links in the bbPress reply header that contains the admin links and meta information.

Instead of putting a slightly darker shade of gray on top of a slightly dark shade of white, why not instead not define a background color for the reply header and let the links inherit from a users theme.

I would also like to not define a background color for the reply and topic posts as well so that it will look better for users that may want to use a dark background for their site, and not needing to go and changing bbPress plugin CSS to have that.

Attachments (4)

Reply Header Contrast issues.png (27.4 KB) - added by Robkk 3 years ago.
3003.patch (781 bytes) - added by Robkk 3 years ago.
This is a straightforward patch for the issue I lay out in the ticket. I didn't remove any other default content background colors in this patch. If I need to play it safe with these patches, I can just change the color to transparent.
contrast-ratio.jpg (82.9 KB) - added by mercime 2 years ago.
3003.2.patch (689 bytes) - added by mercime 2 years ago.

Download all attachments as: .zip

Change History (8)

#1 @thebrandonallen
3 years ago

@Robkk, I agree with inheriting link styles. However, I think we need to keep the header background color for the visual separation. I'm not stuck on that, so better ideas are welcome. For instance, maybe a border-bottom declaration would be sufficient here? I feel like any direction we go with the header, it's going to take some tweaking on a dark theme, so a background color may still be the appropriate choice.

Also, would you mind working up a patch for the links?

@Robkk
3 years ago

This is a straightforward patch for the issue I lay out in the ticket. I didn't remove any other default content background colors in this patch. If I need to play it safe with these patches, I can just change the color to transparent.

#2 @johnjamesjacoby
3 years ago

  • Milestone changed from Awaiting Review to Under Consideration

This links are intentionally "muted" to not draw attention to the bevy of moderation links.

In some themes (and on wpcom) we hide them until they're hovered over, which is the ultimate accessibility problem, but is great for the moderation team.

#3 @mercime
2 years ago

WCAG AA requires 4.5:1 contrast ratio for regular text.

#767676 on #f5f5f5 background = 1.75:1 fail. Change to #707070 for 4.50:1 ratio.

#cccccc on #f4f4f4 background = 1.46:1 fail. Change to #707070 for 4.50:1 ratio.

#aaaaaa on #fbfbfb background = 2.24:1 fail. Change to #747474 for 4.52:1 ratio.

Patch and screenshot to follow.

Last edited 2 years ago by mercime (previous) (diff)

@mercime
2 years ago

#4 @mercime
2 years ago

  • Keywords has-patch added; needs-patch removed
Note: See TracTickets for help on using tickets.