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

[adamsoucie]

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.

[swissspidy]

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

[adamsoucie]

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.

[michaelarestad]

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

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

[mor10]

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.

[michaelarestad]

In 35791:

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

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

fixes #34876, #34864.

[adamsoucie]

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?

[adamsoucie]

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

[michaelarestad]

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

[afercia]

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