Title: Default contrast on “Sale!” doesn’t meet accessibility guidelines Last modified: September 30, 2023 --- # Default contrast on “Sale!” doesn’t meet accessibility guidelines * Resolved [anphira](https://wordpress.org/support/users/anphira/) * (@anphira) * [2 years, 6 months ago](https://wordpress.org/support/topic/default-contrast-on-sale-doesnt-meet-accessibility-guidelines/) * During accessibility testing of a WooCommerce website, the following color contrast issues were flagged. * The default background color of “Sale!” is #b3af54 – this does not meet WCAG contrast requirements. Please darken this default background color to at least a contrast ratio of 3, preferably one of 4.5. * In the “.woocommerce span.onsale” property of woocommerce.css?ver=8.1.1 * Additionally the default color of the price is too light. “.woocommerce ul.products li.product .price” sets the foreground color to #b3af54 – as this is text without bold in some cases, it needs to meet the contrast ratio of 4.5. * Also, please check other woocommerce default CSS to make sure that #b3af54 doesn’t show up as the default color in other places as it is too light to contrast with the standard white background of a website. Viewing 5 replies - 1 through 5 (of 5 total) * [Saif](https://wordpress.org/support/users/babylon1999/) * (@babylon1999) * [2 years, 6 months ago](https://wordpress.org/support/topic/default-contrast-on-sale-doesnt-meet-accessibility-guidelines/#post-17100478) * Hello [@anphira](https://wordpress.org/support/users/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/](https://gist.github.com/). * Look forward to hearing back from you. * Thread Starter [anphira](https://wordpress.org/support/users/anphira/) * (@anphira) * [2 years, 6 months ago](https://wordpress.org/support/topic/default-contrast-on-sale-doesnt-meet-accessibility-guidelines/#post-17103470) * [@babylon1999](https://wordpress.org/support/users/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](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](https://www.siegemedia.com/contrast-ratio#white-on-%2342820d) then it would pass. * [anastas10s](https://wordpress.org/support/users/anastas10s/) * (@anastas10s) * [2 years, 6 months ago](https://wordpress.org/support/topic/default-contrast-on-sale-doesnt-meet-accessibility-guidelines/#post-17113061) * Hi there [@anphira](https://wordpress.org/support/users/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)](https://github.com/woocommerce/woocommerce/tree/trunk/plugins/woocommerce/assets/css), 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](https://woocommerce.com/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. * Thread Starter [anphira](https://wordpress.org/support/users/anphira/) * (@anphira) * [2 years, 6 months ago](https://wordpress.org/support/topic/default-contrast-on-sale-doesnt-meet-accessibility-guidelines/#post-17113476) * [@anastas10s](https://wordpress.org/support/users/anastas10s/) * Go to [https://wordpress.org/plugins/woocommerce/](https://wordpress.org/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. * Plugin Support [Sol J. a11n](https://wordpress.org/support/users/solstudioim/) * (@solstudioim) * [2 years, 5 months ago](https://wordpress.org/support/topic/default-contrast-on-sale-doesnt-meet-accessibility-guidelines/#post-17151663) * Hi [@anphira](https://wordpress.org/support/users/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](https://github.com/woocommerce/woocommerce/issues/new?assignees=&labels=type%3A+enhancement%2Cstatus%3A+awaiting+triage&projects=&template=2-enhancement.yml&title=%5BEnhancement%5D%3A+) on Github. Viewing 5 replies - 1 through 5 (of 5 total) The topic ‘Default contrast on “Sale!” doesn’t meet accessibility guidelines’ is closed to new replies. * ![](https://ps.w.org/woocommerce/assets/icon.svg?rev=3234504) * [WooCommerce](https://wordpress.org/plugins/woocommerce/) * [Frequently Asked Questions](https://wordpress.org/plugins/woocommerce/#faq) * [Support Threads](https://wordpress.org/support/plugin/woocommerce/) * [Active Topics](https://wordpress.org/support/plugin/woocommerce/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/woocommerce/unresolved/) * [Reviews](https://wordpress.org/support/plugin/woocommerce/reviews/) ## Tags * [a11y](https://wordpress.org/support/topic-tag/a11y/) * 5 replies * 4 participants * Last reply from: [Sol J. a11n](https://wordpress.org/support/users/solstudioim/) * Last activity: [2 years, 5 months ago](https://wordpress.org/support/topic/default-contrast-on-sale-doesnt-meet-accessibility-guidelines/#post-17151663) * Status: resolved