Commit a0c83e0c72b for woocommerce
commit a0c83e0c72bca99ff90de4710a4963bedcb47e7d
Author: Minhaz Irphan Mohamed <MinhazI@users.noreply.github.com>
Date: Wed Oct 14 18:54:38 2026 +0530
Fix/69083 chips swatch ring contrast (#69691)
* Make the swatch ring in Product Filter Chips meet 3:1 contrast
The 20% currentColor ring was about 1.5:1 against the panel on pale swatches, below WCAG 1.4.11. Raise it to 60% and expose --wc-product-filter-chips-swatch-border so themes can set the ring colour.
* Add changelog entry for Product Filter Chips swatch ring contrast
* Let the swatch border variable win over state-specific border colors
The has-chip-border-color and has-selected-chip-border-color swatch rules
out-specified the base swatch border and ignored
--wc-product-filter-chips-swatch-border. Use it first in both rules,
keeping the previous values as fallbacks.
* Drop the swatch border custom property from Product Filter Chips
--wc-product-filter-chips-border already themes the swatch ring, so the
extra variable was redundant. It also overrode the transparent swatch
border used with a custom selected chip border. Restore the original
state rules and keep only the 60% default ring.
* Update changelog wording for Product Filter Chips contrast
---------
Co-authored-by: Karol Manijak <20098064+kmanijak@users.noreply.github.com>
diff --git a/plugins/woocommerce/changelog/69083-fix-chips-swatch-ring-contrast b/plugins/woocommerce/changelog/69083-fix-chips-swatch-ring-contrast
new file mode 100644
index 00000000000..494557c57b5
--- /dev/null
+++ b/plugins/woocommerce/changelog/69083-fix-chips-swatch-ring-contrast
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Increase Product Filter Chips swatch outline contrast so swatches are easier to see against similar background colours.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
index 053b09eaa3e..bfc66705729 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-filters/inner-blocks/chips/style.scss
@@ -151,7 +151,7 @@
width: 2.3em;
height: 2.3em;
border-radius: 50%;
- border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
+ border: 1px solid color-mix(in srgb, currentColor 60%, transparent);
flex-shrink: 0;
}