Changeset 64477

Timestamp:

11/08/2026 04:42:59 PM (25 hours ago)

Author:

joedolson

Message:

Twenty Twenty Four: Adjust text input border colors for a11y.

Shift the colors used for text input borders so they meet the WCAG 3:1 contrast ratios in all theme variations.

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

Props joedolson, sabernhardt, raiyanmarzan, denisej25.
Fixes #66190.
Built from ​https://develop.svn.wordpress.org/trunk@65337

Location:

trunk

Files:

• wp-content/themes/twentytwentyfour/styles/maelstrom.json (modified) (1 diff)
• wp-content/themes/twentytwentyfour/theme.json (modified) (4 diffs)
• wp-includes/version.php (modified) (1 diff)

trunk/wp-content/themes/twentytwentyfour/styles/maelstrom.json

@@ -32 +32 @@
                                 }
                         ]
+                },
+                "custom": {
+                        "inputBorderColor": "var(--wp--preset--color--contrast-3)"
                 },
                 "typography": {

trunk/wp-content/themes/twentytwentyfour/theme.json

@@ -154 +154 @@
                         ]
                 },
+                "custom": {
+                        "inputBorderColor": "#757575"
+                },
                 "layout": {
                         "contentSize": "620px",
@@ -521 +524 @@
                         },
                         "core/loginout": {
-                                "css": "& input{border-radius:.33rem;padding:calc(0.667em + 2px);border:1px solid #949494;}"
+                                "css": "& input{border-radius:.33rem;padding:calc(0.667em + 2px);border:1px solid var(--wp--custom--input-border-color);}"
                         },
                         "core/navigation": {
@@ -725 +728 @@
                         },
                         "core/search": {
-                                "css": "& .wp-block-search__input{border-radius:.33rem}",
+                                "css": "& .wp-block-search__input{border-radius:.33rem}&.wp-block-search__button-inside .wp-block-search__inside-wrapper{border-color:var(--wp--custom--input-border-color)}",
                                 "typography": {
                                         "fontSize": "var(--wp--preset--font-size--small)"
@@ -892 +895 @@
                                         "text": "var(--wp--preset--color--contrast)"
                                 }
+                        },
+                        "textInput": {
+                                "border": {
+                                        "color": "var(--wp--custom--input-border-color)"
+                                }
                         }
                 },

trunk/wp-includes/version.php

@@ -17 +17 @@
  * @global string $wp_version
  */
-$wp_version = '7.2-beta4-65336';
+$wp_version = '7.2-beta4-65337';
 
 /**