Commit 2e3b3670d97 for woocommerce
commit 2e3b3670d97a136d779cc0fd7475a1aa8b5a9cf9
Author: Jana Hernandez <71137829+JanaMW27@users.noreply.github.com>
Date: Thu Jun 25 17:18:19 2026 +0200
Fix order edit screen text color contrast for WCAG AA (#65714)
Replace low-contrast grey text (#777/#888/#999) in the order edit screen
meta boxes with the existing WP gray tokens: $gray-900 for primary text
(order data, "no address set", line-item column headers) and $gray-700
for secondary text (SKU/variation, line-item labels, item meta). This
raises every affected text element above the 4.5:1 WCAG AA minimum.
Fixes #60961
DSGWOO-1376
Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
diff --git a/plugins/woocommerce/changelog/fix-order-admin-color-contrast b/plugins/woocommerce/changelog/fix-order-admin-color-contrast
new file mode 100644
index 00000000000..4f194222a3a
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-order-admin-color-contrast
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Improve text color contrast on the admin order edit screen so order data, line-item details, and column headers meet WCAG AA accessibility standards.
diff --git a/plugins/woocommerce/client/legacy/css/admin.scss b/plugins/woocommerce/client/legacy/css/admin.scss
index 636d5337114..140eda2f637 100644
--- a/plugins/woocommerce/client/legacy/css/admin.scss
+++ b/plugins/woocommerce/client/legacy/css/admin.scss
@@ -1921,7 +1921,7 @@ ul.wc_coupon_list_block {
}
p {
- color: #777;
+ color: $gray-900;
}
p.order_number {
@@ -2005,7 +2005,7 @@ ul.wc_coupon_list_block {
small {
display: block;
margin: 5px 0 0;
- color: #999;
+ color: $gray-900;
}
}
@@ -2048,7 +2048,7 @@ ul.wc_coupon_list_block {
}
p.none_set {
- color: #999;
+ color: $gray-900;
}
div.edit_address {
@@ -2291,7 +2291,7 @@ ul.wc_coupon_list_block {
}
h3 small {
- color: #999;
+ color: $gray-900;
}
.amount {
@@ -2359,7 +2359,7 @@ ul.wc_coupon_list_block {
text-align: left;
padding: 1em;
font-weight: normal;
- color: #999;
+ color: $gray-900;
background: #f8f8f8;
-webkit-touch-callout: none;
-webkit-user-select: none;
@@ -2470,7 +2470,7 @@ ul.wc_coupon_list_block {
display: block;
margin-top: 0.5em;
font-size: 0.92em !important;
- color: #888;
+ color: $gray-700;
}
}
@@ -2501,7 +2501,7 @@ ul.wc_coupon_list_block {
label {
white-space: nowrap;
- color: #999;
+ color: $gray-700;
font-size: 0.833em;
input {
@@ -2588,7 +2588,7 @@ ul.wc_coupon_list_block {
.wc-order-item-discount,
.wc-order-item-refund-fields {
font-size: 0.92em !important;
- color: #888;
+ color: $gray-700;
}
.wc-order-item-taxes,
@@ -2641,7 +2641,7 @@ ul.wc_coupon_list_block {
table.display_meta {
margin: 0.5em 0 0;
font-size: 0.92em !important;
- color: #888;
+ color: $gray-700;
tr {
th {
@@ -2870,7 +2870,7 @@ ul.wc_coupon_list_block {
}
h3 small {
- color: #999;
+ color: $gray-900;
}
}