[Accessibility] Incorrect color-contrast - lists of elements

[michalina-graczyk]

What I'm trying to achieve

What I'm trying to achieve is to have accessibility friendly website, some of the elements have an Incorrect color-contrast.

Steps to reproduce the problem

1. Go to the main page

System information Operating system: Mac OS Browser: Chrome v.84 Help URL: https://dequeuniversity.com/rules/axe/3.5/color-contrast?application=AxeChrome

Summary	Description	Selector	Source Code
Fix any of the following: Element has insufficient color contrast of 1.5 (foreground color: #ffffff, background color: #51e9d2, font size: 13.5pt (18px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	["button > span"]	<span>Shop sale</span>
Fix any of the following: Element has insufficient color contrast of 1.74 (foreground color: #c4c4c4, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	["a[href="\/product\/apple-juice-test\/72\/"] > .product-list-item > .product-list-item__category"]	<p class="product-list-item__category">Juices</p>
Fix any of the following: Element has insufficient color contrast of 1.74 (foreground color: #c4c4c4, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	["a[href="\/product\/apple-juice-test\/72\/"] > .product-list-item > .product-list-item__price > .product-list-item__undiscounted_price > span"]	<span>3,00&nbsp;USD</span>
Fix any of the following: Element has insufficient color contrast of 1.74 (foreground color: #c4c4c4, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	["a[href="\/product\/carrot-juice\/73\/"] > .product-list-item > .product-list-item__category"]	<p class="product-list-item__category">Juices</p>
Fix any of the following: Element has insufficient color contrast of 1.74 (foreground color: #c4c4c4, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	["a[href="\/product\/polo-shirt\/110\/"] > .product-list-item > .product-list-item__category"]	<p class="product-list-item__category">Polo Shirts</p>
Fix any of the following: Element has insufficient color contrast of 1.74 (foreground color: #c4c4c4, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	["a[href="\/product\/seaman-lager\/83\/"] > .product-list-item > .product-list-item__category"]	<p class="product-list-item__category">Alcohol</p>
Fix any of the following: Element has insufficient color contrast of 1.74 (foreground color: #c4c4c4, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	["a[href="\/product\/seaman-lager\/83\/"] > .product-list-item > .product-list-item__price > .product-list-item__undiscounted_price > span"]	<span>3,00&nbsp;USD</span>
Fix any of the following: Element has insufficient color contrast of 1.74 (foreground color: #c4c4c4, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	["a[href="\/product\/test\/130\/"] > .product-list-item > .product-list-item__category"]	<p class="product-list-item__category">Groceries</p>
Fix any of the following: Element has insufficient color contrast of 1.74 (foreground color: #c4c4c4, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	[".slider-slide:nth-child(6) > a > .product-list-item > .product-list-item__category"]	<p class="product-list-item__category">Homewares</p>
Fix any of the following: Element has insufficient color contrast of 1.74 (foreground color: #c4c4c4, background color: #ffffff, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	[".slider-slide:nth-child(6) > a > .product-list-item > .product-list-item__price > .product-list-item__undiscounted_price > span"]	<span>20,00&nbsp;USD</span>
Fix any of the following: Element has insufficient color contrast of 1.61 (foreground color: #c4c4c4, background color: #f6f6f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	["p:nth-child(1) > a"]	<a href="/collection/summer-collection/1/">Summer collection</a>
Fix any of the following: Element has insufficient color contrast of 1.61 (foreground color: #c4c4c4, background color: #f6f6f6, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	["p:nth-child(2) > a[href="\/collection\/winter-sale\/2\/"]"]	<a href="/collection/winter-sale/2/">Winter sale</a>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.