WordPress.org

Make WordPress Core

Opened 21 months ago

Last modified 3 weeks ago

#35622 assigned defect (bug)

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

Reported by: afercia Owned by: afercia
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: color-contrast has-patch has-screenshots
Focuses: ui, accessibility Cc:

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

Attachments (6)

35622.patch (4.9 KB) - added by afercia 21 months ago.
35622.2.patch (6.8 KB) - added by afercia 21 months ago.
35622.3.patch (6.3 KB) - added by afercia 21 months ago.
35622.4.patch (6.3 KB) - added by afercia 21 months ago.
35622.5.patch (8.5 KB) - added by afercia 20 months ago.
35622.diff (2.7 KB) - added by afercia 3 weeks ago.

Download all attachments as: .zip

Change History (40)

#1 @afercia
21 months ago

  • Owner set to afercia
  • Status changed from new to assigned

@afercia
21 months ago

#2 @afercia
21 months ago

  • Keywords has-patch added; needs-patch removed

@afercia
21 months ago

#3 @afercia
21 months ago

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)
Last edited 21 months ago by afercia (previous) (diff)

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


21 months ago

#5 @afercia
21 months ago

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
21 months ago

#6 @afercia
21 months ago

Refreshed patch. Removes no more used selectors.

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


21 months ago

@afercia
21 months ago

#8 @afercia
21 months ago

  • Keywords has-screenshots added

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

https://cldup.com/pkTq6VgZee.png

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

#9 @afercia
21 months ago

  • Description modified (diff)

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


21 months ago

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


20 months ago

#12 @rianrietveld
20 months ago

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
20 months ago

#13 @afercia
20 months ago

  • Keywords commit added

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.

https://cldup.com/9vHWUh42DL.png

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


20 months ago

#15 @hugobaeta
20 months ago

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/

#16 follow-up: @melchoyce
20 months ago

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

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


20 months ago

This ticket was mentioned in Slack in #design by melchoyce. View the logs.


20 months ago

#19 in reply to: ↑ 16 ; follow-up: @hugobaeta
20 months ago

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.

#20 in reply to: ↑ 19 ; follow-up: @melchoyce
20 months ago

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.

#21 in reply to: ↑ 20 @hugobaeta
20 months ago

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

#22 follow-up: @picard102
20 months ago

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.

#23 in reply to: ↑ 22 @afercia
20 months ago

  • Keywords commit removed
  • Milestone changed from 4.5 to Future Release

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.

#24 @afercia
17 months ago

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.

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


16 months ago

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


15 months ago

#27 @afercia
15 months ago

Related: #37018.

#28 @afercia
15 months ago

Related: #37016.

#29 @afercia
14 months ago

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.

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


8 months ago

#31 @rianrietveld
8 months ago

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

#32 @afercia
6 months ago

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
3 weeks ago

#33 @afercia
3 weeks ago

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.

#34 @afercia
3 weeks ago

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.

Note: See TracTickets for help on using tickets.