Make WordPress Core

Opened 13 hours ago

Last modified 9 hours ago

#66081 new defect (bug)

Media: Fix color of the inactive view-switcher link

Reported by: afercia Owned by:
Priority: normal Milestone: 7.2
Component: Media Version:
Severity: normal Keywords: has-screenshots good-first-bug has-patch needs-testing
Cc: Focuses: accessibility

Description

In the Media list / grid, the color of the inactive (non-current) view switcher link is a very light gray #c3c4c7. See screenshots.

Against the white background, the Contrast Ratio is only 1.74:1. It should be at least 4.5:1.

Besides WCAG compliance, the inactive link looks disabled, while it is perfectly functional.

After the admin reskin, the gray color that provides a minimum contrast ratio is #757575.

Attachments (1)

01 media view switcher.png (30.5 KB ) - added by afercia 13 hours ago.

Download all attachments as: .zip

Change History (6)

#1 @afercia
13 hours ago

  • Keywords good-first-bug added

#2 @valani9099
11 hours ago

@afercia I’d like to work on a patch for this ticket. I’ll test the proposed color change and share a pull request once it is ready.

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


10 hours ago
#3

  • Keywords has-patch added

This PR changes the inactive Media Library view switcher icon color from #c3c4c7 to #757575.

The updated color increases the contrast ratio against the white background from 1.74:1 to approximately 4.61:1, making the inactive but functional view switcher easier to identify.

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

## Testing instructions

  1. Navigate to Media → Library.
  2. Switch between List and Grid views.
  3. Verify that the inactive view switcher icon uses #757575.
  4. Verify that the current, hover, and keyboard focus states continue to work correctly.

## Checks performed

  • npm run grunt -- precommit:css
  • npm run build:dev

Both commands completed successfully.

## Use of AI Tools

AI assistance: Yes
Tool(s): ChatGPT Codex
Model(s): GPT-5
Used for: Identifying the relevant CSS selector and providing testing and contribution workflow guidance. The final change and command results were reviewed by me.

#4 @valani9099
10 hours ago

  • Keywords needs-testing added

I have opened a pull request to improve the contrast of the inactive Media Library view switcher:

https://github.com/WordPress/wordpress-develop/pull/13464

The change updates the inactive icon color from #c3c4c7 to #757575. The CSS lint and development build checks completed successfully. Testing and feedback are welcome.

@valani9099 commented on PR #13464:


9 hours ago
#5

Tested this PR using WordPress Playground.

I switched between the List and Grid views in Media Library and verified that the inactive view-switcher icon now uses #757575. The updated icon has improved contrast and the view switching continues to work correctly.

The change works as expected. Screenshot attached.
https://github.com/user-attachments/assets/b7ebd846-61c0-4817-b214-43ecb576994e

Note: See TracTickets for help on using tickets.