Color not accessibility for AA

[Otshelnik-Fm]

WordPress 5.7
Admin Color Scheme - Default
see the screenshot with the problem

p.s. the 13-pixel text (in admin dashboard) is not readable. We would have increased it.

[sabernhardt]

Thanks for the report!

The previous gray color for the dashboard activity widget's published dates was #72777c, which barely passed the guidelines at 4.52, but [50025] changed that to #787c82 (4.2:1 ratio).

We could check the other instances of #787c82, and I'll create a preliminary patch to switch this text to the next-darkest gray in the palette (#646970).

The toolbar's comments link is an older issue, which can be addressed on #27831 (removing the link when there are zero comments to moderate instead of showing the number zero at half-opacity).

[sabernhardt]

switching dashboard widget's published dates color from Gray 40 to Gray 50

[audrasjb]

before patch

[audrasjb]

after patch

[audrasjb]

The patch looks good to me. The change is not super noticeable, but now it passes AA.
Thanks @sabernhardt, marking for commit.

[SergeyBiryukov]

In 50525:

Accessibility: Administration: Use a darker color for post dates in the Activity and Quick Draft dashboard widgets.

This ensures that the color meets the WCAG 2.0 AA recommended contrast ratio.

Follow-up to [50025].

Props sabernhardt, Otshelnik-Fm, audrasjb.
Fixes #52760.

[SergeyBiryukov]

In 50526:

Accessibility: Administration: Use a darker color for post dates in the Activity and Quick Draft dashboard widgets.

This ensures that the color meets the WCAG 2.0 AA recommended contrast ratio.

Follow-up to [50025].

Props sabernhardt, Otshelnik-Fm, audrasjb.
Merges [50525] to the 5.7 branch.
Fixes #52760.

[SergeyBiryukov]

Replying to sabernhardt:

We could check the other instances of #787c82

Yes, please :) Upon a quick check, I've found quite a few other instances, would be great to make sure they meet the guidelines as well.

[sabernhardt]

For the ​remaining 58 instances of #787c82, just over half of them are text that needs more contrast.

@ryelle made a good point about how darkening the icons could make a noticeable change in visual importance, so I only recommend editing 4 of those:

• The 3 search icons to keep them the same color as the placeholder text (in Customizer)
• The Themes filter icon to match the button's background color when the "drawer" of options is opened

(I didn't notice any icons that have insufficient contrast of less than 3.0 with this gray.)

[sabernhardt]

52760.1.diff​ adds more text color (and background color) changes, switching from the Gray 40 to Gray 50 again. I also included the theme tags list, which was even lighter.

[SergeyBiryukov]

In 50571:

Accessibility: Administration: Use a darker gray color for various admin UI items.

This ensures that the color meets the WCAG 2.0 AA recommended contrast ratio.

Follow-up to [50025], [50525].

Props sabernhardt, ryelle.
Fixes #52760.

[SergeyBiryukov]

Reopening for backporting to the 5.7 branch.

[SergeyBiryukov]

In 50578:

Accessibility: Administration: Use a darker gray color for various admin UI items.

This ensures that the color meets the WCAG 2.0 AA recommended contrast ratio.

Follow-up to [50025], [50525].

Props sabernhardt, ryelle.
Merges [50571] to the 5.7 branch.
Fixes #52760.

[kebbet]

While browsing my multisites I found out that the text on red background-color for an inactive website is not AA, in the website list.

Normal text: 3.03
Links: 2.13
Delete actions: 2.60
Pip character: 1.77

The same background-color can be seen in the user list, if a user is a member of an inactive website.

[kebbet]

Red 5 from Ryelle's color chart as background and Red 70 for delete actions make them comply to WCAG AA, but blue links don't.
Attached image shows one delete action link (Skräppost) in Red 70, and background in Red 5.

[kebbet]

Color edits

<img width="608" alt="1-invalid-nav" src="​https://user-images.githubusercontent.com/541093/113353773-2aafff80-930c-11eb-9615-be004c3b530d.png">

<img width="423" alt="2-sites-status" src="​https://user-images.githubusercontent.com/541093/113353775-2aafff80-930c-11eb-90dc-8e8cdff50f16.png">

Trac ticket: https://core.trac.wordpress.org/ticket/52760

[ryelle]

Rather than try to change all the link colors to get the blue link text to pass 4.5 contrast ratio against Red 5, I've tweaked how the site statuses are colored. In the PR above, I'm using Red 0 for both archive and deleted sites, and Yellow 0 for spammed and mature sites. This way we don't need to adjust the link colors, as both have 4.5+ contrast.

The other change in that PR is from doing a search of Red 5 as a background color, where I found that the menu type label on invalid nav items doesn't have enough contrast, so I've changed the background (lighter) & border (darker) to increase that contrast.

[ryelle]

white on light blue, low contrast (customizer, widgets, reorder, move to new area)

[ryelle]

white on light blue, low contrast (new themes, filter hover state)

[ryelle]

Added a few other places where the contrast is too low

[kebbet]

The PR looks OK and it addresses the issues I found, thanks Ryelle!

I found another low contrast issue:
In widgets screen (and in the customizer), adding a plain text widget and switching to Text (from Visual) displays a “New Custom HTML Widget“-notice with 2.36 contrast ratio. White text on blue background.

Updated the PR to address the other sections mentioned in the ticket. Now:

<img width="352" alt="Screen Shot 2021-04-06 at 1 19 05 PM" src="​https://user-images.githubusercontent.com/541093/113752251-bd6ce780-96da-11eb-8c77-80f904516cd3.png">
<img width="231" alt="Screen Shot 2021-04-06 at 1 19 25 PM" src="​https://user-images.githubusercontent.com/541093/113752252-be057e00-96da-11eb-9104-cb00b56f602d.png">
<img width="287" alt="Screen Shot 2021-04-06 at 12 19 24 PM" src="​https://user-images.githubusercontent.com/541093/113752254-be057e00-96da-11eb-8026-e5856e3bcd70.png">

[peterwilsoncc]

@ryelle The code changes and screen shots on the linked pull request look good to me. Are you able to do the commit honors during your day if you'd like to get it in prior to the release candidate? Thansk boss.

[ryelle]

In 50687:

Accessibility: Administration: Update various background colors for increased contrast.

This ensures that contrast between text color and background meets the WCAG 2.0 AA recommended value. The following locations were changed:

• Network List Tables: Use lighter background colors for site status indicator.
• Nav Menus: Use a lighter background color for invalid menu items.
• Pointers: Use a darker background for pointer header.
• Themes: Use darker background on filter button hover.
• Customizer: Use darker background for selected widget.

Follow-up to [50025], [50571].
Props kebbet, melchoyce, peterwilsoncc.
Fixes #52760.

Committed in r50687

[ryelle]

Thanks for checking this @peterwilsoncc!

Reopening for backporting r50687 to the 5.7 branch.

[ryelle]

In 50688:

Accessibility: Administration: Update various background colors for increased contrast.

This ensures that contrast between text color and background meets the WCAG 2.0 AA recommended value. The following locations were changed:

• Network List Tables: Use lighter background colors for site status indicator.
• Nav Menus: Use a lighter background color for invalid menu items.
• Pointers: Use a darker background for pointer header.
• Themes: Use darker background on filter button hover.
• Customizer: Use darker background for selected widget.

Follow-up to [50025], [50571].
Props kebbet, melchoyce, peterwilsoncc.
Merges [50687] to the 5.7 branch.
Fixes #52760.