Audit Gray 40

[sabernhardt]

WordPress 5.7 has 60 instances of #787c82, which was identified as insufficient text color contrast against white on Trac #52760. Two of those are already darker in r50525.

4.20:1 - Gray 40 against white 3.86:1 - Gray 40 against Gray 2 (body background)

Text needs a contrast of at least 4.5. Icons and borders need a minimum of 3.0, so most of those could remain lighter.

Recommendations to darken:

• All dashboard text
• All placeholder text
• Deprecated media help text
• Classic Editor title label and Comments URL
• Revision date
• Theme information: version number, author line, ratings, description, plus tags
• Customizer: widget descriptions plus the 3 search icons
• All Menus information
• Widget sidebar area description
• Privacy data request pending status
• Themes filter button icon
• All background colors
• Border used for the triangle of the comments speech bubble

Recommendations to leave lighter:

• Both focus outlines
• Privacy policy and widget borders
• Most icons (only editing a few for consistency)

[sabernhardt]

Text and/or icon color

Dashboard content

Gray text should be darker against white background

1. Welcome panel paragraphs

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/dashboard.css#L142-L144

2. Activity widget no-content status paragraph

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/dashboard.css#L758-L761

3. Activity widget comment counts by type

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/dashboard.css#L770-L773

4. RSS widget summary and date (not in the default News widget)

   RSS summary and date shown with (outdated) plugin

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/dashboard.css#L514-L517

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/dashboard.css#L533-L536

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/dashboard.css#L997-L1001

Two colors already darkened in 50525

1. Quick Draft widget dates

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/dashboard.css#L695-L697

2. Activity widget dates

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/dashboard.css#L786-L792

[sabernhardt]

Placeholder text

forms.css

https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/forms.css#L228-L239

color picker

https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/color-picker.css#L104-L115

media frame

https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-includes/css/media-views.css#L153-L164

[sabernhardt]

common.css icons

1. Icons for closing/dismissing (darkening might be good for consistency, leaving lighter can be better for showing visual importance to the other icons/content)

   welcome panel dismiss icon passes the minimum contrast, but it doesn't match the other icons

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/common.css#L784-L800

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/common.css#L1424-L1434

2. Metabox ordering button icons - no change necessary

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/common.css#L2091-L2095

3. Filter toggle icon (at least on Add New Theme screen) - good to change this with the background colors

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/common.css#L1118-L1126

4. Other toggle icons

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/common.css#L3112-L3116

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/common.css#L3434-L3440

[sabernhardt]

Media

1. View switcher icon for inactive mode link, on mouseover or focus

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/list-tables.css#L725-L728

2. Upload error dismiss button icon in grid mode

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/media.css#L474-L479

3. Edit Attachment dialog icons

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/media.css#L619-L633

4. Dismiss errors icon with uploader status (the inline uploader overrides this color to #646970 and I can't find where the lighter color shows)

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-includes/css/media-views.css#L1365-L1370

Deprecated media

I couldn't reproduce this, but the font stack used to include Lucida Grande, so it was clearly text. r12098

https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/deprecated-media.css#L71-L74

[sabernhardt]

edit.css

1. Classic Editor title label (shown over input when JavaScript is enabled)

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/edit.css#L70-L76

2. Comments are-you-sure link reference

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/edit.css#L1434-L1442

[sabernhardt]

Revisions

1. Revision date is too light

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/revisions.css#L133-L135

[sabernhardt]

Themes screens

1. Theme overlay navigation and close icons have sufficient contrast

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/themes.css#L390-L396

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/themes.css#L398-L411

2. Theme overlay version number is too light

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/themes.css#L663-L670

3. Theme overlay author text is also too light

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/themes.css#L672-L678

4. Ratings

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/themes.css#L1123-L1127

5. Theme description

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/themes.css#L1856-L1861

Tags in overlay have lower contrast

https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/themes.css#L705-L712

[sabernhardt]

Customizer

1. Widget descriptions (too light)

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/customize-widgets.css#L262-L265

2. Menu and widget search icons (sufficient contrast, but could match placeholder)

   

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/customize-controls.css#L2596-L2607

3. Themes search icon (sufficient contrast, but could match placeholder)

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/customize-controls.css#L2669-L2679

4. Available menu items toggle button

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/customize-nav-menus.css#L321-L333

5. Menu item loading (part of split-second fade-in animation)

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/customize-nav-menus.css#L758-L765

6. Widget action toggle

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/customize-widgets.css#L27-L29

[sabernhardt]

Menus

Each of these three needs to be darker (#646970).

1. Theme location text

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/nav-menus.css#L137-L140

2. Missing title for menu item (against #f6f7f7)

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/nav-menus.css#L484-L486

3. "Original" text

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/nav-menus.css#L687-L694

[sabernhardt]

Widgets

Widget sidebar area description needs to be darker

https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/widgets.css#L353-L358

[sabernhardt]

forms.css

1. Press This icon

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/forms.css#L1002-L1010

2. Separator character between Privacy Request action links (already much darker than #dcdcde in post and user list tables)

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/forms.css#L1267-L1269

3. Privacy data request pending status (too light)

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/forms.css#L1317-L1321

[sabernhardt]

Authentication dialog (after logout)

The close button icon has sufficient contrast (3.68), and it's isolated.

https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-includes/css/wp-auth-check.css#L85-L94

[sabernhardt]

wp-pointer.css

https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-includes/css/wp-pointer.css#L65-L80

[sabernhardt]

Background color (with white text)

Each of these background colors needs to be darker.

1. Theme counts (number installed on Themes screen and filtered count when adding new theme)

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/common.css#L1016-L1027

2. Filter options toggle (add new theme)

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/common.css#L1174-L1178

3. Comments count speech bubble

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/list-tables.css#L48-L63

[sabernhardt]

Borders and focus outline

1. Triangle for comments speech bubble - change to match background color

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/list-tables.css#L65-L76

2. Privacy policy guide suggested text border

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/edit.css#L937-L944

3. Dragging a widget over a closed sidebar

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/widgets.css#L513-L517

4. Site Health tabs focus outline

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/site-health.css#L145-L149

5. Privacy Settings tabs focus outline

   

   https://github.com/sabernhardt/WordPress/blob/9808fad416e9e5f2e95f2835faa5235c54a44d8f/wp-admin/css/edit.css#L763-L767