Admin Reskin: Hard to tell if secondary variation button is pressed

[wildworks]

The secondary variation buttons are very difficult to distinguish whether a button is pressed or not, because there is almost no color difference between the default background and the pressed background. For example, the button indicating the active tag in the Permalink Structure settings.

Increasing the transparency ​here might improve things, but this change would affect all buttons, so I think it needs careful investigation.

[wildworks]

Differences between the buttons in WordPress 6.9 and WordPress 7.0 when setting up the permalink structure

https://core.trac.wordpress.org/ticket/64856

[maulikmakwana2008]

This patch improves the visual distinction of the pressed state for secondary buttons in the admin interface.

Currently the pressed state for .wp-core-ui .button-secondary:active uses a very subtle background (rgba(..., 0.12)), which results in minimal visual contrast compared to the default or hover states. In practice this makes it difficult to determine whether the button is pressed, particularly in interfaces where these buttons behave like selectable tags (for example in Settings → Permalinks when inserting structure tags).

From a usability and accessibility perspective, interactive states should provide clear visual feedback so users can easily identify when an element is active or pressed. Increasing the background opacity slightly improves the contrast between the default, hover, and active states while maintaining the existing admin color scheme and design language.

The change is intentionally minimal: it increases the opacity of the active state background to provide clearer visual feedback without introducing new colors or affecting other button variants.

Changes included in this patch:

• src/wp-includes/css/buttons.css
• build/wp-includes/css/buttons.min.css

Testing:

1. Navigate to Settings → Permalinks.
2. Click one of the available structure tags (e.g. %year%, %postname%).
3. The pressed state is now easier to distinguish from the default state.

This change aims to improve clarity of interactive states in the admin UI while keeping the visual impact minimal and consistent with the existing admin styling.

[huzaifaalmesbah]

Screenshots

Before Apply Patch	After Apply Patch

[wildworks]

I've created a plugin to test all button variations. I hope this helps with this ticket.

​https://github.com/t-hamano/wp-button-variations-checker

[wildworks]

This might be a separate issue, but please note that we also need to consider the active button within the button group.

[wildworks]

Comparison of active buttons within a button-group

[sabernhardt]

The pressed buttons need more than a change in background color. When inside a group, they have a subtle inset box-shadow, and buttons on the Permalinks Settings page have no box-shadow.

The Modern (default) scheme would have insufficient contrast with a darker background.

• 4.93:1 in the current unpressed state
• 4:63:1 with the current subtle background rgba(var(--wp-admin-theme-color--rgb), 0.04)
• 4.15:1 with the proposed rgba(var(--wp-admin-theme-color--rgb), 0.12)

[wildworks]

In Gutenberg Storybook, I found that setting aria-pressed to true doesn't produce any visual change to the Button component:

​https://wordpress.github.io/gutenberg/?path=/story/design-system-components-button--default&args=aria-pressed:!true

Perhaps we need to decide how "active" or "pressed" buttons should look in the new design system? cc @jameskoster @mciampini @joen

[khushi1501]

Tested this issue on WordPress 7.0 Beta 5.

I was able to notice the problem where it is hard to tell if the secondary variation button is selected. After applying the patch, the button state is much clearer and easier to identify.

Before applying the patch:-
​https://prnt.sc/MXvyn_pQacYD

After applying the patch:-
​https://prnt.sc/yqkTOD7nmpWx

[joedolson]

So, I think there are two decisions to make here:

1) The pressed state needs to be accessibly differentiated in context in the 7.0 release, and
2) The design system needs to reach a decision about what these buttons should look like.

I think that we need to decide the first item in this ticket whether the design system question is resolved or not; but as this is an issue introduced in 7.0, that can happen during the RC phase. If there's an agreement reached on what the design system should do, we can do that; otherwise, we should come up with a one-off design with the understanding that it may be temporary prior to release.

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

## Button

### Default state

Before	After

### Focused state

Before	After

## Button Group

### Default state

Before	After

### Focused state

Before	After

## Use of AI Tools

[wildworks]

otherwise, we should come up with a one-off design with the understanding that it may be temporary prior to release.

The current pressed state is very difficult to understand, so I think some kind of temporary fix is definitely necessary.

​https://github.com/WordPress/wordpress-develop/pull/11282/

[ozgursar]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11282

Environment

• WordPress: 7.0-beta5-61991-src
• PHP: 8.2.29
• Server: nginx/1.29.4
• Database: mysqli (Server: 8.4.7 / Client: mysqlnd 8.2.29)
• Browser: Chrome 145.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1
  • WP Button Variations Checker 1.1.0

Steps taken

1. Install WP Button Variations plugin from ​https://github.com/t-hamano/wp-button-variations-checker
2. Observe how buttons appear
3. Apply the patch
4. Observe the pressed state of buttons have a better distinction with the increased opacity
5. ✅ Patch is solving the problem

Expected result

• The secondary variation buttons and the selected button in a button group should be easily identifiable with enough contrast.

Screenshots with results

Before patch

---

After patch

Screencasts with results

Before patch: ​https://files.catbox.moe/ymjz3e.mp4
After patch: ​https://files.catbox.moe/8vwirr.mp4

[noruzzaman]

Test Report

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

Environment

• WordPress: 7.0-beta5-20260316.045922
• PHP: 7.4.33
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 146.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Actual Results

1. ✅ Issue resolved with patch.

Before	After

[gaisma22]

Patch Testing Report

Patch Tested: ​https://github.com/WordPress/wordpress-develop/pull/11282

Environment

• WordPress: 7.0-beta5-61991-src
• PHP: 8.3.30
• Server: nginx/1.29.5
• Database: MySQL 8.4.8
• Browser: Brave
• OS: Ubuntu
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None
• Plugins: WP Button Variations Checker 1.1.0

Steps taken

1. Applied patch from PR #11282 using git apply
2. Rebuilt CSS using npm run ​build:dev
3. Navigated to the WP Button Variations Checker plugin page
4. Observed the Secondary button rows - active state is now clearly different from the default state
5. Navigated to Settings -> Permalinks
6. Clicked the %hour% structure tag
7. The active tag now has a visible background and inset shadow

✅ Patch is solving the problem

Expected result

Secondary variation buttons and structure tags on the Permalinks page should have a pressed/active state that is easy to tell apart from the default state.

Additional Notes

• Tested with the Default (purple) admin color scheme from the WP 7.0 admin reskin
• The patch raises the active state background opacity from 0.04 to 0.15 and adds an inset box-shadow - the pressed state is now clearly visible
• Button group active states also show improved distinction
• WP Button Variations Checker plugin used for testing: ​https://github.com/t-hamano/wp-button-variations-checker

Screenshots/Screencast with results

Before patch:

After patch:

The contrast between the default and selected states of the secondary variation buttons is now clearly identifiable. ✅

Before	After

Button Variations:

Before	After

[joedolson]

The contrast of the current pressed state is insufficient in most color schemes. E.g., in modern, we're at 4.0:1.

The visibility is certainly much improved, but it'll need to have better contrast to be workable.

We may need to darken the text color.

Thanks for the feedback!

A couple possibilities would be darkening the text color; or using a lighter background with a darker shadow.

I tried to improve the contrast:

I have no idea why that merge happened the way it did...how weird.

[joedolson]

In 62106:

Admin: A11y: Fix visibility of pressed button state.

Increase the style contrast between pressed and un-pressed button states by using enhanced box-shadow to differentiate.

Props wildworks, mukesh27, shailu25, maulikmakwana2008, huzaifaalmesbah, sabernhardt, khushi1501, ozgursar, noruzzaman, gaisma22, sirlouen, joedolson.
Fixes #64856.