Make WordPress Core

Opened 2 years ago

Closed 2 years ago

Last modified 2 years ago

#34864 closed defect (bug) (fixed)

#a11y-color: Color contrast issues with the "Add New" buttons on Edit screens

Reported by: adamsoucie Owned by: michaelarestad
Milestone: 4.5 Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-patch
Focuses: accessibility Cc:

Description (last modified by afercia)

This is in relation to Ticket 31713, but after discussions with Rian, Joe, Jeff, and others at WCUS Contributor Day, we've decided to separate out some of the issues.

The "Add New" button on the edit screens is not WCAG 2 AA Compliant. The button contrast is currently at 3.94, noticeably under the 4.5 minimum standard.

Our recommendation is to do a simple swap between the hover state and the default state background colors.

Attachments (3)

current-colors.png (81.8 KB) - added by swissspidy 2 years ago.
34864.diff (716 bytes) - added by michaelarestad 2 years ago.
34864.2.diff (844 bytes) - added by michaelarestad 2 years ago.

Download all attachments as: .zip

Change History (16)

#1 @swissspidy
2 years ago

current-colors.png shows the current colors for default/hover/focus using the default color scheme.

#2 @afercia
2 years ago

  • Description modified (diff)

#3 @adamsoucie
2 years ago

In regards to @swissspidy current colors note, the :focus state is actually a browser generated default. On Rian's recommendation, I added a separate ticket, #34876, to address that.

2 years ago

#4 @michaelarestad
2 years ago

  • Keywords has-patch added

The above patch ups the contrast a bit and happens to resolve #34876.


Example of various states: initial, hover, focus, hover + focus


#5 @mor10
2 years ago

I know this blue drop shadow is the standard focus indicator for buttons. I'm not sure that's a good reason to keep using it though. On low-end LCD laptops, the shadow hardly shows up at all and the only visual indicator of the focus state becomes the only indicator of focus. Just my 2 cents.

#6 @michaelarestad
2 years ago

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

In 35791:

Administration: Improve color contrast of 'Add New' buttons.

This also includes improved focus styles for 'Add New'.

fixes #34876, #34864.

#7 @adamsoucie
2 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

Love the contrast change. It also makes the button stand out more on the grey background, and makes it clear the element is more than just a standard link.

However, I want to echo @mor10's comments. The text change is way too subtle (as is the case throughout the admin's :focus states). What is the logic against mirroring :hover, when :hover, it can be argued, is actually an extension of :focus?

#8 @adamsoucie
2 years ago

  • Resolution set to worksforme
  • Status changed from reopened to closed

Realizing we're discussing two separate issues (and why I address them in separate tickets). Apologies, I'm still new to this.

#9 @netweb
2 years ago

  • Milestone changed from Awaiting Review to 4.5
  • Resolution changed from worksforme to fixed

#10 @michaelarestad
2 years ago

@mor10 I do agree with you on the state of the focus states shadow. Let's get a ticket going shortly to iterate and improve the focus styling across the board. A two or three pixel solid border (via shadow) would be pretty ideal.

#11 @johnbillion
2 years ago

  • Version trunk deleted

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

2 years ago

#13 @afercia
2 years ago

For reference: discussion about the focus style continues on #34904 and #34957.

Note: See TracTickets for help on using tickets.