Make WordPress Core

Opened 9 hours ago

Last modified 8 hours ago

#65995 new defect (bug)

Administration: remove any usage of the #787c82 gray color

Reported by: afercia Owned by:
Priority: normal Milestone: 7.2
Component: Administration Version:
Severity: normal Keywords: has-patch has-screenshots
Cc: Focuses: accessibility

Description

Splitting this out from #65807.

After [63399] there are 15 remaining usages of the color #787c82 across the codebase.

In some cases it is used for controls that contain only icons, for example the next / previous / close buttons in the media and themes browsers. Same for some icon-only controls in the Customizer.

These icons must meet a 4.5:1 minimum color contrast ratio.

In a few cases #787c82 is used for other things, e.g. a border.

Regardless, this color appears to be not justifiable given its limited use, and it can't be used for text or icon-only controls. After fixing all the relevant cases, the remaining usages would be maybe 2 or 3 so it's reasonable to remove it entirely.

Attachments (1)

01 gray.png (358.1 KB ) - added by afercia 8 hours ago.

Download all attachments as: .zip

Change History (3)

This ticket was mentioned in PR #13320 on WordPress/wordpress-develop by @afercia.


9 hours ago
#1

  • Keywords has-patch added

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

The color #787c82 doesn't meet minimum color contrast ratio when used for text of icon-only controls (where the icon is equivalent to text that must meet the contrast threshold).

This PRs removes all usages of #787c82 in favor of darker gray shades.

## Use of AI Tools

None.

#2 @afercia
8 hours ago

  • Keywords has-screenshots added

In the linked pr https://github.com/WordPress/wordpress-develop/pull/13320 all usages of #787c82 are removed in favor of darker grays. A few examples places where the color is now compliant:

  • Media browser previous / next / close icons.
  • Theme browser previous / next / close icons.
  • Customizer accordions icons.
  • Site health tabs focus.
  • Switch view icons focus.

See screenshots.

@afercia
8 hours ago

Note: See TracTickets for help on using tickets.