WordPress.org

Make WordPress Core

Opened 6 months ago

Closed 5 months ago

#52760 closed defect (bug) (fixed)

Color not accessibility for AA

Reported by: Otshelnik-Fm Owned by: sabernhardt
Milestone: 5.7.1 Priority: normal
Severity: normal Version: 5.7
Component: Administration Keywords: commit fixed-major
Focuses: accessibility, css Cc:

Description

WordPress 5.7
Admin Color Scheme - Default
see the screenshot with the problem https://paste.pics/02c8c048e3526530b61d8b9528412b84

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

Attachments (9)

52760.diff (359 bytes) - added by sabernhardt 6 months ago.
switching dashboard widget's published dates color from Gray 40 to Gray 50
Capture d’écran 2021-03-12 à 11.46.25.png (102.7 KB) - added by audrasjb 6 months ago.
before patch
Capture d’écran 2021-03-12 à 11.46.46.png (102.6 KB) - added by audrasjb 6 months ago.
after patch
52760.1.diff (8.3 KB) - added by sabernhardt 6 months ago.
52760-mulitsite.png (36.3 KB) - added by kebbet 6 months ago.
52760-mulitsite-corr.png (182.8 KB) - added by kebbet 6 months ago.
Color edits
Screen Shot 2021-04-01 at 6.22.15 PM.png (49.8 KB) - added by ryelle 6 months ago.
white on light blue, low contrast (customizer, widgets, reorder, move to new area)
Screen Shot 2021-04-01 at 6.26.49 PM.png (13.1 KB) - added by ryelle 6 months ago.
white on light blue, low contrast (new themes, filter hover state)
52760-textwidget.png (99.9 KB) - added by kebbet 6 months ago.

Download all attachments as: .zip

Change History (35)

#1 follow-up: @sabernhardt
6 months ago

  • Focuses css added
  • Milestone changed from Awaiting Review to 5.7.1
  • Owner set to sabernhardt
  • Status changed from new to accepted

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).

Last edited 6 months ago by sabernhardt (previous) (diff)

@sabernhardt
6 months ago

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

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


6 months ago

#3 @audrasjb
6 months ago

  • Keywords has-patch commit added

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

#4 @SergeyBiryukov
6 months ago

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

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.

#5 @SergeyBiryukov
6 months ago

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.

#6 in reply to: ↑ 1 @SergeyBiryukov
6 months ago

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.

This ticket was mentioned in Slack in #core-css by sabernhardt. View the logs.


6 months ago

#8 @sabernhardt
6 months ago

  • Keywords has-patch commit removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

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
6 months ago

#9 @sabernhardt
6 months ago

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.

#10 @sabernhardt
6 months ago

  • Keywords has-patch added

#11 @SergeyBiryukov
6 months ago

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

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.

#12 @SergeyBiryukov
6 months ago

  • Keywords commit fixed-major added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening for backporting to the 5.7 branch.

#13 @SergeyBiryukov
6 months ago

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

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.

#14 @kebbet
6 months ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

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.

#15 @kebbet
6 months ago

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
6 months ago

Color edits

#16 @SergeyBiryukov
6 months ago

  • Keywords needs-patch added; has-patch commit fixed-major removed

#18 @ryelle
6 months ago

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
6 months ago

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

@ryelle
6 months ago

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

#19 @ryelle
6 months ago

Added a few other places where the contrast is too low

#20 @kebbet
6 months ago

The PR looks ok and adresses the issues I've 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.

Version 0, edited 6 months ago by kebbet (next)

#21 @prbot
5 months ago

ryelle commented on PR #1155:

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">

#22 @peterwilsoncc
5 months ago

  • Keywords commit added

@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.

#23 @ryelle
5 months ago

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

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.

#24 @prbot
5 months ago

ryelle commented on PR #1155:

Committed in r50687

#25 @ryelle
5 months ago

  • Keywords fixed-major added; has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Thanks for checking this @peterwilsoncc!

Reopening for backporting r50687 to the 5.7 branch.

#26 @ryelle
5 months ago

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

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.

Note: See TracTickets for help on using tickets.