Skip to content

Twenty Twenty-Four: Improve the contrast of text input borders. - #15349

Open
Marzaan wants to merge 1 commit into
WordPress:trunkfrom
Marzaan:66190-tt4-input-border-contrast
Open

Marzaan wants to merge 1 commit into
WordPress:trunkfrom
Marzaan:66190-tt4-input-border-contrast

Conversation

@Marzaan

@Marzaan Marzaan commented Nov 2, 2026

Copy link
Copy Markdown

The #949494 input border in Twenty Twenty-Four does not reach 3:1 contrast with the page background in most style variations. This PR adds one color setting for input borders. The fix also covers the Search block "Button inside" layout, where the border is on the wrapper and not on the input.

This PR continues #13764 and addresses the review comments on that PR:

  • This PR does not change Twenty Fourteen.
  • This PR uses the textInput element, so the color also applies to the comment form and to other text inputs.

Changes

  • theme.json adds settings.custom.inputBorderColor with the value #757575.
  • The textInput element, the core/loginout input, and the core/search "Button inside" wrapper use this setting.
  • styles/maelstrom.json overrides the setting with the contrast-3 color.

The setting keeps each color in one place. Maelstrom changes one value and does not copy the block CSS.

Maelstrom color

#757575 has only 1.33:1 contrast on the Maelstrom background, #38629F. The ticket discusses two lighter colors:

Color Contrast with #38629F
#b9b9b9 3.13:1
#D5E0F0 (contrast-3) 4.61:1

This PR uses contrast-3, because the color is already in the Maelstrom palette and has the higher contrast. If you prefer #b9b9b9, change the one value in styles/maelstrom.json.

Test results

The test measured the computed border color in a browser, as a logged-out visitor, on these elements:

  • The Search block input, with the button outside.
  • The Search block input, with no button.
  • The Search block wrapper, with the button inside.
  • The Login/out block input.
  • The comment form textarea and text input.

WordPress 7.1.4: All six elements had the same border color in each style variation.

Style Background Before After Contrast before Contrast after
Default #F9F9F9 #949494 #757575 2.88 4.38
Ember #F9F8F5 #949494 #757575 2.86 4.34
Fossil #D6D2CE #949494 #757575 2.02 3.06
Ice #EBEBEF #949494 #757575 2.55 3.88
Maelstrom #38629F #949494 #D5E0F0 2.03 4.61
Mint #E4EFEB #949494 #757575 2.58 3.92
Onyx #272727 #949494 #757575 4.92 3.24
Rust #F3F0E7 #949494 #757575 2.66 4.04

The "Before" color is the measured value for the default style. For the other styles, "Before" is the value from theme.json and the block styles. The "Contrast before" values are calculated from these colors.

Onyx has less contrast after this change, but it stays above 3:1.

WordPress 6.4.14 (the theme requires 6.4): The test covered the default and Maelstrom styles. No PHP errors occurred.

  • The Login/out input and the "Button inside" wrapper use the new color.
  • The Search input and the comment form keep #949494, because the textInput element requires WordPress 6.9.

Not tested:

  • trunk. The results above use the released versions.
  • The block editor and the Site Editor.

Reviewer notes

  • WordPress 6.9 added the textInput element. This is later than the theme's $schema version (6.5). WordPress 6.4.14 showed no errors with the element in theme.json.
  • The core/loginout CSS applies to all input elements in the block, as it did before this PR. This includes the submit button.

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

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5.5
Used for: The code change, the browser tests, and the draft of this description.


This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

The default `#949494` border does not reach 3:1 contrast with the page
background in most style variations.

Add a custom `inputBorderColor` setting with a default of `#757575`. The
`textInput` element, the Login/out block, and the Search block wrapper
for the "Button inside" layout use this setting. The Maelstrom variation
overrides the setting with its `contrast-3` color, because `#757575` has
less contrast on the Maelstrom background.

See #66190.
@github-actions

github-actions Bot commented Nov 2, 2026

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs.

Core Committers: Use this line as a base for the props when committing in SVN:

Props raiyanmarzan.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.


Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

  • @propsbot add <username> to give props to a GitHub user. Requires write access.
  • @propsbot remove <username> to leave a user out of the props. Requires write access.
  • @propsbot refresh to refresh this list. Adding the props-bot label works too.

@github-actions

github-actions Bot commented Nov 2, 2026

Copy link
Copy Markdown

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant