Make WordPress Core

Opened 9 years ago

Closed 13 months ago

Last modified 8 months ago

#35659 closed defect (bug) (fixed)

Color contrast: audit all the oranges (colors!)

Reported by: afercia's profile afercia Owned by:
Milestone: 4.6 Priority: normal
Severity: normal Version:
Component: Administration Keywords: needs-patch has-screenshots color-contrast ui-feedback
Focuses: ui, accessibility Cc:

Description

See related #31713.

Orange is a difficult color and is hard to contrast to a sufficient level. Additionally, sometimes it's used on light gray backgrounds, e.g. the zebra-striped table rows.

Wondering if the best choice would be to simply use a different color.

See screenshot below with some examples:

https://cldup.com/l1sdTLCKEl.png

Attachments (2)

unapprove.png (315.3 KB) - added by kekkakokkers 8 years ago.
Unapprove link
approve.png (395.9 KB) - added by kekkakokkers 8 years ago.
Approve link

Download all attachments as: .zip

Change History (25)

#1 @afercia
9 years ago

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

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


9 years ago

#3 @afercia
9 years ago

More oranges-ish (almost reds) that need to be updated:

https://cldup.com/kYj9SDmY2U.png

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


9 years ago

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


9 years ago

#6 @afercia
9 years ago

  • Keywords ui-feedback added

Needs a design decision about the color/s to use as a replacement for the oranges.

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


9 years ago

#8 @afercia
9 years ago

  • Milestone changed from 4.5 to Future Release

No decision about the new colors to use yet and tomorrow is beta 4 day so, punting.

#9 @afercia
8 years 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 kekkakokkers. View the logs.


8 years ago

@kekkakokkers
8 years ago

Unapprove link

@kekkakokkers
8 years ago

Approve link

#11 @kekkakokkers
8 years ago

Im going to adress #d98500 used for unapprove link comments

Please see attachments: unapprove.png and approve.png

My suggestion is to remove the accent colors orange and green, and use two standard link colors: blue for Reply, Quick Edit and Edit , and red for Unapprove, Spam and Trash.

  • There is a mix of actions and status changes, and hitting Reply on an unapproved comment will actually Reply and approve
  • Both the orange and green is only used in this specific screen, and by removing these there will be less color combinations to validate for contrast
  • Action links will be consistent with correspondent links for post and pages

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


8 years ago

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


7 years ago

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


7 years ago

#15 @afercia
6 years ago

  • Owner afercia deleted

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


6 years ago

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


5 years ago

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


4 years ago

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


3 years ago

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


14 months ago

#21 @bvreeman22
14 months ago

I've looked through the site, and the color issues identified on this ticket do not seem to be in use anymore. The closest that I found are the colors #b32d2e and #996800, which are approved WordPress Colors found on https://codepen.io/ryelle/full/WNGVEjw

#22 @joedolson
13 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

No definite new contrast issues have been flagged against this for several years now. While there may still be outstanding issues to identify, it's time to close this ticket out. Any new color contrast issues should be raised as independent new tickets, rather than keeping this open-ended ticket active forever.

#23 @swissspidy
8 months ago

  • Milestone changed from Future Release to 4.6
Note: See TracTickets for help on using tickets.