Color contrast: TinyMCE icons

[afercia]

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.

[afercia]

First pass. Screenshot before and after the patch:

[afercia]

Refreshed patch to handle two more #777.

[afercia]

Updated patch with ​the new "dark medium gray" from Hugo Baeta.

[afercia]

Updated screenshot:

[michaelarestad]

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.

[michaelarestad]

Changes in 35604.4.patch​

• removed focus color on A color button

[afercia]

Related: #35571.

[joedolson]

This looks great to me.

[afercia]

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:

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?

[melchoyce]

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.

[lukepettway]

I think it works pretty well.

[afercia]

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.

[afercia]

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.