Make WordPress Core

Opened 7 years ago

Last modified 2 years ago

#35659 assigned defect (bug)

Color contrast: audit all the oranges (colors!)

Reported by: afercia's profile afercia Owned by:
Milestone: Future Release 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 7 years ago.
Unapprove link
approve.png (395.9 KB) - added by kekkakokkers 7 years ago.
Approve link

Download all attachments as: .zip

Change History (21)

#1 @afercia
7 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.


7 years ago

#3 @afercia
7 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.


7 years ago

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


7 years ago

#6 @afercia
7 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.


7 years ago

#8 @afercia
7 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
7 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.


7 years ago

@kekkakokkers
7 years ago

Unapprove link

@kekkakokkers
7 years ago

Approve link

#11 @kekkakokkers
7 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.


6 years ago

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


6 years ago

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


5 years ago

#15 @afercia
5 years ago

  • Owner afercia deleted

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


4 years ago

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


4 years ago

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


3 years ago

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


2 years ago

Note: See TracTickets for help on using tickets.