saleor / saleor-storefront

A GraphQL-powered, NextJs-based, PWA storefront for Saleor. IMPORTANT: This project is [DEPRECATED] in favor of saleor/react-storefront soon to become our default demo and storefront starter pack.
https://demo.saleor.io/
BSD 3-Clause "New" or "Revised" License
769 stars 674 forks source link

[Accessibility] Incorrect color-contrast - lists of elements #830

Open michalina-graczyk opened 4 years ago

michalina-graczyk commented 4 years ago

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-itemprice > .product-list-itemundiscounted_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-itemprice > .product-list-itemundiscounted_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-itemprice > .product-list-itemundiscounted_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] commented 4 years ago

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.