Color contrast ratio in the admin

[afercia]

There's room for improvements for the color contrast ratio in the admin. Overall it's good but there are some places here and there were it's not sufficient, most notably:

• Primary buttons
• TinyMCE buttons
• Login screens (see #31548)
• orange (for example Comments Approve, Unapprove, Pending)

For a AA level color contrast ratio should be at least 4.5:1.

Please also notice #777 on #fff gives a contrast of 4.48:1 which *substantially* complies with the required 4.5:1.
You may not notice this because some color contrast checkers will round the reported value and will just report the first decimal "4.5:1" but actually it's 4.48:1.
Just mentioning this to let you consider if there are any legal issues that require a *formal* compliance.

A while ago I did a little research checking several colors in the admin and prepared a first draft of a patch. But after the admin color changes in #31234, at this point that patch can only be useful as a list of places to check :) Uploading it anyway as a starting point.

Tracking label: #a11y-color

[afercia]

useful as list of places to check

[obenland]

/cc @hugobaeta

[afercia]

Looking at the new colors in #31234, we would need at least two new shades of grey between #464b50 and #82878c:

• the first one mainly for text on white background (or vice-versa), the threshold is #767676
• the second one for text on light grey backgrounds (just #f1f1f1 maybe more gray backgrounds?)

both would need the nice touch of @hugobaeta, when you have a chance :)

[melchoyce]

Could you upload a before/after screenshot? Thanks!

[rianrietveld]

Closing this one: this ticket has been split into multiple others labeled #a11y-color