WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#35604 closed defect (bug) (fixed)

Color contrast: TinyMCE icons

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

Description

See related #31713.

The TinyMCE icons default color is #777777 on a #f5f5f5 background, resulting in a color contrast ratio of 4.11:1.
Should be increased to at least 4.5:1. On hover/focus the icons border should have a sufficient color contrast too.

Looking at the new colors in the core handbook the first suitable one is #32373c but maybe it's a bit too dark. I'd like to propose to introduce a new intermediate grey shade, one that would be reusable also on other backgrounds used in the admin like #f1f1f1, for example: #656e77.

Attachments (4)

35604.patch (3.4 KB) - added by afercia 5 years ago.
35604.2.patch (3.6 KB) - added by afercia 5 years ago.
35604.3.patch (3.6 KB) - added by afercia 5 years ago.
35604.4.patch (3.4 KB) - added by michaelarestad 5 years ago.

Download all attachments as: .zip

Change History (20)

@afercia
5 years ago

#1 @afercia
5 years ago

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

First pass. Screenshot before and after the patch:

https://cldup.com/6u2pb421vS.png

@afercia
5 years ago

#2 @afercia
5 years ago

Refreshed patch to handle two more #777.

@afercia
5 years ago

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


5 years ago

#5 @afercia
5 years ago

Updated screenshot:

https://cldup.com/7mf2a6jlwz.png

#6 @michaelarestad
5 years ago

This looked a bit too dark in the screenshot, but when I tried it out, feels pretty good. There's a slight color shift on the A icon when clicked (color changer). I think we should remove that active color change (on just the icon) since it's such a small change now.

#7 @michaelarestad
5 years ago

Changes in 35604.4.patch

  • removed focus color on A color button

This ticket was mentioned in Slack in #core-editor by afercia. View the logs.


5 years ago

#9 @afercia
5 years ago

Related: #35571.

#10 @joedolson
5 years ago

This looks great to me.

#11 @afercia
5 years ago

To recap: while changes on buttons should be done for all buttons (see #35571) this ticket aims to change just the color of the TinyMCE buttons which use only icons without any text. Other buttons in the admin use icons but they also have text so the icon is not so relevant.
By the way, noticed that in the Customizer some icons used within buttons have a #555 color, see for example:
https://cldup.com/47L6yoTeyX.png
where eventually #555 should be updated to #555d66 so maybe all the icons used within buttons should be standardized to #555d66, for example also the "Add Media" right above TinyMCE?

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


5 years ago

#13 follow-up: @melchoyce
5 years ago

Looks good to me.

Maybe all the icons used within buttons should be standardized to #555d66, for example also the "Add Media" right above TinyMCE?

Do the icons need to be that dark if they have labels with appropriate contrast? The buttons themselves are much bigger and thicker than text so they should be easier to see. I think they should go darker than they are now, but #555d66 seems pretty dark when it's an icon + label.

#14 @lukepettway
5 years ago

I think it works pretty well.

#15 in reply to: ↑ 13 @afercia
5 years ago

Replying to melchoyce:

Do the icons need to be that dark if they have labels with appropriate contrast?

No, it's not required :) Was just asking for consistency and because the "Add Media" button icon different color (compared with the Editor icons) is now a bit evident.

#16 @afercia
5 years ago

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

In 36528:

Accessibility: improve the color contrast ratio for the TinyMCE button icons.

Also, tries to use the new grays from the Design Handbook wherever applicable.

Props michaelarestad, afercia.
Fixes #35604.

Note: See TracTickets for help on using tickets.