Color contrast: audit all the "#f00" and "red" reds

[afercia]

See related #31713.

In various admin screens there are some occurrences of #f00 and red reds mainly used for error messages. These reds don't guarantee a sufficient color contrast ratio when combined with a white background (or text if they're used for background). They should be probably all replaced with the new red #dc3232.

[afercia]

Refreshed patch, trying to be a bit more accurate. There are 5-6 selectors to move to deprecated media or completely remove, would appreciate some feedback and review.

• selectors related to the old media UI should be moved to deprecated-media.css
• selectors related to the old plugins tables, when the tables id was printed out using a $context param, should be probably removed
• maybe a couple more unused selectors (.file-error and .plugins a.delete:hover)

[afercia]

As far as I see, .file-error was used in swfupload handlers.js introduced in [7100] and removed in [14816]. Seems no more used anywhere else. .plugins a.delete:hover seems a leftover pre-WP 3.0.

[afercia]

Refreshed patch. Removes no more used selectors.

[afercia]

Refreshed patch to improve a couple of things. Screenshot with some examples of the new reds:

Side note: the warning for the image scaling could be improved a bit :)

[rianrietveld]

We discussed this in the #accessibility Slack channel and this is our recommendation on the red color:

Both colors used should have a contrast ratio of 4.5 or more.
Using the WordPress colors this would be for example #9a2323 and on hover/focus #c62d2d.

The link on hover status needs to have sufficient contrast with the background, but not necessarily with the normal link state or with neighboring text.

[afercia]

Refreshed patch to use the new official reds. Thanks to @hugobaeta there's now a nice #c62d2d red which has a sufficient contrast ratio with one of the darker grey backgrounds used in the admin: #eeeeee. This red can be used on several backgrounds as default red, for example for error messages or normal red text.

About links
The current convention in the admin is that the :hover state uses a "lighter" color. I'd propose to discuss this point in the future, together with the slightly inconsistent usage of text-decoration: underline. So, to keep the "hover-lighter" effect, the normal state of red links needs to be darker than #c62d2d. See in the screenshot below.

Currently. most of the red links (there are exceptions here and there) are #a00 and #f00 on hover. A first proposal suggested #c62d2d and #e35b5b for hover but the latter is under a contrast ratio of 4.5:1. This leads to the second proposal, implemented in the refreshed patch and IMHO also the closest one to the current colors.
Any thoughts more than welcome.

[hugobaeta]

We ​talked today in slack about the idea of doing block hovers for things like this, since contrast is a big problem here. I created a test on codepen to see how it could work. What do y'all think? ​http://codepen.io/hugobaeta/full/zrLwLM/

[melchoyce]

The removal of the underline feels super weird, but it does get the point across. The background hover could work, but only in very specific scenarios — I don't think it would work with a line of links (like in list tables).

[hugobaeta]

Replying to melchoyce:

The background hover could work, but only in very specific scenarios — I don't think it would work with a line of links (like in list tables).

Why not? The background would really only show up on hover anyway...

I'm totally down with the option of add/remove underline on hover tho. It's more subtle/polished, and serves its a11y purpose.

[melchoyce]

Replying to hugobaeta:

Replying to melchoyce:

The background hover could work, but only in very specific scenarios — I don't think it would work with a line of links (like in list tables).

Why not? The background would really only show up on hover anyway...

Because all the other links just change color. It would be weird if just the red link had a background on hover.

[hugobaeta]

Replying to melchoyce:

Because all the other links just change color. It would be weird if just the red link had a background on hover.

Gotcha. That makes sense, yes.

For what it's worth, I think the underline idea could work for everything. Looking at the screenshots @afercia posted above, none of the links actually have an underline to begin with, so adding one on hover would work for every link (but probably a bigger and more complicated patch).

I added that to the codepen (second row) for us to preview: ​http://codepen.io/hugobaeta/full/zrLwLM/ - there's still the subtle color change, but if we want to, we could move the red link to the lighter hue - #c62d2d - (that still passes AA contrast ratio) and do no color change (just the underline change) (third row).

[picard102]

In regards to the background changing on red links; I think that seeing as most of them are destructive actions, that having them be different than the rest of the links is preferable. Maybe the order of the links would need the change though with the destructive action being last.

[afercia]

Replying to picard102:

Maybe the order of the links would need the change though with the destructive action being last.

Yep, that's something that should be considered, there's also a bit of inconsistency about the links order across all the admin screens. By the way, the general issue about links color/hover state etc., should probably be considered holistically for all the links, blue ones included. There's no consensus on a proper solution yet, though the one using underline mentioned by @hugobaeta seems the most logical to me. Tomorrow is beta 4 day so, punting.

[afercia]

In 37611:

Accessibility: improve the color contrast in the Edit Comment "Status" box.

The current orange and red used for the radio button labels in the Edit Comment
"Status" box don't have a sufficient color contrast ratio with the background.
Removing the colors improves accessibility and consistency.

See #35659, #35622.
Fixes #36967.

[afercia]

Related: #37018.

[afercia]

Related: #37016.

[afercia]

In 38536:

Widgets: Make the Delete/Remove links red.

For consistency and accessibility, all the UI controls that perform destructive
actions should be red.

Props monikarao, lukecavanagh, patilswapnilv, ibachal.
See #35622.
Fixes #37016.

[rianrietveld]

@karmatosed can we discuss this on the contributors day in WCLND?
About the consequences of having link on hover and focus underlined?

[afercia]

In 40480:

Accessibility: Make some Widgets buttons real buttons.

Links used as UI controls that behave like buttons, should be buttons.

• changes the widgets "toggle", "Delete", and "Close" links to buttons
• uses aria-expanded to announce the state of the toggle buttons
• increases a bit the clickable area of the toggle
• ensures the "circular focus" doesn't get cut-off in some browsers by centering the toggle arrows
• uses a <span> element with an aria-hidden attribute to hide CSS generated font icons from assistive technologies
• standardizes on .toggle-indicator:before rather than :after
• changes two #f00 reds in #dc3232, see #35622

Fixes #31476.

[afercia]

Pending decisions, in the meantime I'd propose to change all the occurrences of #f00 and red in core to the official #dc3232 red, see ​https://make.wordpress.org/design/handbook/design-guide/foundations/colors/.
While this doesn't address all the contrast ratio issues, it fixes the reds against a white background and removes from core colors that are not part of the official palette.

[afercia]

In 41711:

Accessibility: Change all the #f00 and red to the official WordPress accent red.

WordPress should exclusively use colors from the official colors palette, see
​https://make.wordpress.org/design/handbook/design-guide/foundations/colors/
Partially addresses accessibility color contrast ratio issues.

See #35622.

[afercia]

Closing in favor of #47682, which merges this ticket with #47157 to better address the root issue holistically.