Commit 1d4c6cc4e93 for woocommerce
commit 1d4c6cc4e936c5382fb9a3679df9ab29f205f457
Author: James Kemp <me@jckemp.com>
Date: Mon Apr 20 22:23:45 2026 +0100
Fix insufficient color contrast for Select2 placeholder text (#63751)
* Fix insufficient color contrast for Select2 placeholder text (WCAG 2.2 SC 1.4.3)
* Add changefile(s) from automation for the following project(s): woocommerce
* Use dark text color for Select2 placeholders
---------
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/63751-fix-6409-select2-placeholder-a11y-contrast b/plugins/woocommerce/changelog/63751-fix-6409-select2-placeholder-a11y-contrast
new file mode 100644
index 00000000000..6e48c3e249b
--- /dev/null
+++ b/plugins/woocommerce/changelog/63751-fix-6409-select2-placeholder-a11y-contrast
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix insufficient color contrast for Select2 placeholder text to meet WCAG 2.2 AA requirements.
\ No newline at end of file
diff --git a/plugins/woocommerce/client/legacy/css/forms.scss b/plugins/woocommerce/client/legacy/css/forms.scss
index d23300e0747..938216f35b8 100644
--- a/plugins/woocommerce/client/legacy/css/forms.scss
+++ b/plugins/woocommerce/client/legacy/css/forms.scss
@@ -179,7 +179,7 @@
}
.select2-selection__placeholder {
- color: #999;
+ color: var(--wc-form-color-text, #444);
}
.select2-selection__arrow {
diff --git a/plugins/woocommerce/client/legacy/css/select2.scss b/plugins/woocommerce/client/legacy/css/select2.scss
index 5fe1ec4c9c1..86bfc283487 100644
--- a/plugins/woocommerce/client/legacy/css/select2.scss
+++ b/plugins/woocommerce/client/legacy/css/select2.scss
@@ -194,7 +194,7 @@
.select2-container--default
.select2-selection--single
.select2-selection__placeholder {
- color: #999;
+ color: #444;
}
.select2-container--default
@@ -289,7 +289,7 @@
.select2-container--default
.select2-selection--multiple
.select2-selection__placeholder {
- color: #999;
+ color: #444;
margin-top: 5px;
float: left;
}
@@ -530,7 +530,7 @@
.select2-container--classic
.select2-selection--single
.select2-selection__placeholder {
- color: #999;
+ color: #444;
}
.select2-container--classic