Media: Fix color of the inactive view-switcher link

[afercia]

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.

[valani9099]

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

[valani9099]

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.

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.

Manual Test Report

Applied the patch (list-tables.css / list-tables.min.css, .view-switch a:before color #c3c4c7 to #757575) to a local WP 7.1 install and verified with getComputedStyle:

• Inactive view-switcher icon: rgb(117, 117, 117) = #757575 (contrast ratio now ~4.6:1, up from 1.74:1)
• Active (current) icon: unchanged at #1e1e1e, confirmed the .current selector is untouched by this patch
• Tested both directions: List active / Grid inactive, and Grid active / List inactive, color swap works correctly both ways
• Keyboard focus state (:focus): unaffected, still shows the standard WP admin blue focus ring (rgb(56, 88, 233)) and box-shadow outline
• No visual regressions in Media Library list/grid switching

Environment: WordPress 7.1, tested via local install (not Playground).

Patch works as expected, no regressions found.

Manual Test Report

Applied the patch (list-tables.css / list-tables.min.css, .view-switch a:before color #c3c4c7 to #757575) to a local WP 7.1 install and verified with getComputedStyle:

• Inactive view-switcher icon: rgb(117, 117, 117) = #757575 (contrast ratio now ~4.6:1, up from 1.74:1)
• Active (current) icon: unchanged at #1e1e1e, confirmed the .current selector is untouched by this patch
• Tested both directions: List active / Grid inactive, and Grid active / List inactive, color swap works correctly both ways
• Keyboard focus state (:focus): unaffected, still shows the standard WP admin blue focus ring (rgb(56, 88, 233)) and box-shadow outline
• No visual regressions in Media Library list/grid switching

Environment: WordPress 7.1, tested via local install (not Playground).

Patch works as expected, no regressions found.

Thank you for thoroughly testing the patch and confirming that it works as expected without regressions! 🙌

[sanayasir]

Tested the changes on WordPress Playground.

The updated color for the inactive Media List/Grid view switcher is displaying as expected and meets the requirements outlined in the ticket. The new gray provides sufficient contrast against the white background and improves visual clarity without making the inactive control appear disabled.

[ozgursar]

Before PR13464

[ozgursar]

After PR13464

[ozgursar]

Test Report

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

Environment

• WordPress: 7.2-alpha-20260914.125622
• Subdirectory: No
• PHP: 8.3.32
• Server: PHP.wasm
• Database: WP_MySQL_On_SQLite (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 152.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.5
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.3.1

Steps taken

1. Go to Media
2. Observe the list and grid view icon colors
3. Confirm that the initial inactive color is #c3c4c7
4. Apply the patch
5. Confirm that the inactive icon color is #747474
6. ✅ Patch is solving the problem

Expected result

• Inactive icon color should have enough contrast ratio.

Screenshots/Screencast with results

Before

After

[afercia]

Excuse me if I take over, but I'd like this fix to be committed soon.

[afercia]

In 63621:

Media: Fix color of the inactive view-switcher link.

Makes sure the 'List' and 'Grid' links icons have a sufficient color contrast ratio for all their states.

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

Props valani9099, adamsilverstein, haritpanchal, sanayasir, ozgursar, afercia.
Fixes #66081.

[valani9099]

Thank you for committing the fix! I appreciate everyone who reviewed and tested the patch. Glad to see this resolved. 🙌