Commit 81b7453890e for woocommerce
commit 81b7453890ef428a833a68b7f7d803673ea935ed
Author: James Kemp <me@jckemp.com>
Date: Wed Mar 11 08:05:46 2026 +0000
Fix insufficient colour contrast in Dashboard Status widget (#63521)
* Fix insufficient colour contrast in Dashboard Status widget
Replace #aaa with $subtext (#767676) for list item and link text in the
Dashboard Status widget to meet WCAG 2.2 AA minimum contrast ratio of 4.5:1.
Closes #63486
* Fix hover contrast and hardcoded colours in Dashboard Status widget
Replace legacy hardcoded colours with WP admin theme CSS custom
properties and remove the transition to match WP core button behaviour:
- strong: #21759b → var(--wp-admin-theme-color, #3858e9)
- hover: #2ea2cc → var(--wp-admin-theme-color-darker-10, #2145c9)
- Remove transition: all ease 0.5s (WP admin buttons don't transition)
* Inherit default wp-admin link styles in Dashboard Status widget
---------
Co-authored-by: Panos (Panagiotis Synetos) <2484390+PanosSynetos@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/fix-63486-dashboard-status-widget-contrast b/plugins/woocommerce/changelog/fix-63486-dashboard-status-widget-contrast
new file mode 100644
index 00000000000..5c3fda6cea7
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-63486-dashboard-status-widget-contrast
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix insufficient colour contrast in Dashboard Status widget link text to meet WCAG 2.2 AA requirements.
diff --git a/plugins/woocommerce/client/legacy/css/dashboard.scss b/plugins/woocommerce/client/legacy/css/dashboard.scss
index 5a6a637ba25..d1c611f0518 100644
--- a/plugins/woocommerce/client/legacy/css/dashboard.scss
+++ b/plugins/woocommerce/client/legacy/css/dashboard.scss
@@ -78,13 +78,11 @@ ul.woocommerce_stats {
box-sizing: border-box;
margin: 0;
border-top: 1px solid #ececec;
- color: #aaa;
+ color: $subtext;
a {
display: block;
- color: #aaa;
padding: 9px 12px;
- transition: all ease 0.5s;
position: relative;
font-size: 12px;
@@ -105,16 +103,6 @@ ul.woocommerce_stats {
line-height: 1.2em;
font-weight: normal;
display: block;
- color: #21759b;
- }
-
- &:hover {
- color: #2ea2cc;
-
- &::before,
- strong {
- color: #2ea2cc !important;
- }
}
&::before {