Default contrast on “Sale!” doesn’t meet accessibility guidelines

Hello @anphira,

Thank you for reaching out!

From what I checked, these styles are inhered from the theme, WooCommerce doesn’t set a default colour. :?)

To assist you further, could you please let me know which theme you are using? Also, it would be helpful if you could provide a copy of your site’s System Status report. You can find it via WooCommerce > Status. Select “Get system report” and then “Copy for support” (after you scroll down a bit)”. Once done, please paste it here in your reply or via a text-sharing service like https://gist.github.com/.

Look forward to hearing back from you.

@babylon1999 I pulled up the woo code. It’s in assets/css/woocommerce.css

Just do a find on “#b3af54” and you’ll see 6 uses of that color. Those are the defaults that woocommerce sets in the plugin. They should be updated to use an accessible color.

For example, .woocommerce span.onsale{min-height:3.236em;min-width:3.236em;padding:.202em;font-size:1em;font-weight:700;position:absolute;text-align:center;line-height:3.236;top:-.5em;left:-.5em;margin:0;border-radius:100%;background-color:#b3af54;color:#fff;font-size:.857em;z-index:9}

Here’s the contrast ratio problem: https://www.siegemedia.com/contrast-ratio#white-on-%23b3af54

It needs to be a ratio of at least 4.5.

So if you modified it to something like https://www.siegemedia.com/contrast-ratio#white-on-%2342820d then it would pass.

Hi there @anphira ??

I pulled up the woo code. It’s in assets/css/woocommerce.css

Thank you for elaborating further on this.

I went ahead with looking for that CSS file, in that directory (link here), and it is nowhere to be found, I’m afraid.

Furthermore, the #b3af54 color value is not in-line with the Woo brand and logo guidelines.

To reiterate my colleague’s comment, these styles are inhered from the theme.

I trust that points you in the right direction, but if you have more questions, let us know.

We’re happy to help.

@anastas10s

Go to https://www.ads-software.com/plugins/woocommerce/

Click on “Download” to download the official plugin. What is actually being distrbuted.

Unzip, go to assets > css > woocommerce.css and see the code I referenced above.

assets > css is EMPTY on github. It is has dozens of files in it when you download the plugin.

Hi @anphira, I found #b3af54 within this path: /assets/css/woocommerce.css

Please note that this color can be overridden by a custom CSS code.

However, feel free to submit your enhancement request on WooCommerce repo here on Github.