WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 years ago

#36967 closed defect (bug) (fixed)

Color contrast: the Edit Comment screen "Status" box labels

Reported by: afercia Owned by: afercia
Milestone: 4.6 Priority: normal
Severity: normal Version:
Component: Comments Keywords: has-screenshots color-contrast has-patch commit
Focuses: ui, accessibility Cc:

Description

See related #31713, #35659 and #35622.

In the "Edit Comment" screen, the "Status" box has three radio buttons with colored labels. The current orange and red don't have a sufficient color contrast ratio of at least 4.5:1.

Quickly discussed on the Slack design channel and agreed to simply remove the colors, see screenshot below.

https://cldup.com/znI7WasX00.png

Worth noting orange it's basically impossible to contrast with a white background unless it's turned to a nearly-red or nearly-brown color. Also, it was pointed out the current red "Spam" is competing with the red "Move to Trash" below.

Attachments (1)

36967.patch (2.1 KB) - added by afercia 3 years ago.

Download all attachments as: .zip

Change History (4)

@afercia
3 years ago

#1 @afercia
3 years ago

  • Keywords has-patch added
  • Owner set to afercia
  • Status changed from new to assigned

The proposed patch just removes the colors.

Note: as far as I can tell, the #poststuff .inside label.deleted is not used in core, it was introduced during the work to introduce the "Trash" status on #4529 where at some point the deleted comments were still editable and the Status box had a 4th radio button. See the first patches on that ticket.

#2 @rachelbaker
3 years ago

  • Keywords commit added

Patch looks good.

#3 @afercia
3 years ago

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

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.

Note: See TracTickets for help on using tickets.