Commit 9e1a3b79e1a for woocommerce
commit 9e1a3b79e1a657b4b430669f5d28abf19fc17515
Author: Panos (Panagiotis Synetos) <2484390+PanosSynetos@users.noreply.github.com>
Date: Mon Jun 8 13:25:59 2026 +0300
Fix: Improve color contrast for status marks on System Status tab (WCAG 2.2 AA) (#65299)
* Fix: Improve contrast for --wc-green and mark.no on System Status tab
Darken --wc-green from #008a20 to #007518 so .yes text and green text
inside <code> elements meets WCAG 2.2 AA 4.5:1 contrast against all
table row backgrounds including alternating grey rows (#fcfcfc) and
WordPress <code> element backgrounds.
Switch mark.no from --wc-subtext (#767676) to --wc-secondary-text
(#515151) to meet 4.5:1 contrast on grey table rows, matching the
existing table text color for visual consistency.
Fixes #64928
* Add changelog entry for contrast fix
* Simplify comment on color contrast improvement
Updated comment to simplify the description of the color contrast improvement.
diff --git a/plugins/woocommerce/changelog/fix-wc-green-subtext-contrast b/plugins/woocommerce/changelog/fix-wc-green-subtext-contrast
new file mode 100644
index 00000000000..468e8cfffb1
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-wc-green-subtext-contrast
@@ -0,0 +1,3 @@
+Significance: patch
+Type: fix
+Comment: Improve color contrast on System Status tab.
diff --git a/plugins/woocommerce/client/legacy/css/_mixins.scss b/plugins/woocommerce/client/legacy/css/_mixins.scss
index 575c077e93d..04160fc3cce 100644
--- a/plugins/woocommerce/client/legacy/css/_mixins.scss
+++ b/plugins/woocommerce/client/legacy/css/_mixins.scss
@@ -297,7 +297,7 @@
}
mark.no {
- color: var(--wc-subtext);
+ color: var(--wc-secondary-text);
}
}
diff --git a/plugins/woocommerce/client/legacy/css/_variables.scss b/plugins/woocommerce/client/legacy/css/_variables.scss
index 8a2c69bddf7..158f3773496 100644
--- a/plugins/woocommerce/client/legacy/css/_variables.scss
+++ b/plugins/woocommerce/client/legacy/css/_variables.scss
@@ -3,7 +3,7 @@
*/
$woocommerce: #720eec !default;
-$green: #008a20 !default;
+$green: #007518 !default;
$red: #a00 !default;
$orange: #ffba00 !default;
$blue: #2ea2cc !default;
diff --git a/plugins/woocommerce/client/legacy/css/order-review.scss b/plugins/woocommerce/client/legacy/css/order-review.scss
index beefc0d29ed..7225254bc9e 100644
--- a/plugins/woocommerce/client/legacy/css/order-review.scss
+++ b/plugins/woocommerce/client/legacy/css/order-review.scss
@@ -96,7 +96,7 @@
margin: 0.5em 0 0;
&--ok {
- color: var(--wc-green, #008a20);
+ color: var(--wc-green, #007518);
}
&--error {