An ADA issue: «7. Insufficient color contrast»

[dmitrii-fediuk]

Several instances of insufficient color contrast were found across different pages of the Kitchen Collection website such as ‘My Cart’ link, price information of product, footer headings.

upwork.com/ab/f/contracts/20805325 https://www.kitchencollection.com

Code snippet:

<a class="action showcart"…</a>

<span class="price">$8.97</span>

<div class="row">
<div class="col-sm-6">
<div class="footer-box">…</div>

Rationale

Two colors are considered to have good visibility if the contrast ratio between foreground text and background is sufficient. W3C has described the minimum contrast ratio for text that is less than 18 point (if not bold) and less than 14 point (if bold) to be 4.5:1 at Level AA and 7:1 at Level AAA.

Recommendations

On all the pages of the website, ensure that each text/background color combination presents a contrast ratio of at least 4.5:1 for standard text, and 3.0:1 for large text (18 points or 14 points and bold). The Color Contrast Analyzer tool allows the user to determine whether a combination of foreground and background colors meets the minimum color contrast ratio.

[dmitrii-fediuk]

I have decomposed it into separate tasks:

• An ADA issue: the «MY CART» title in the top-right corner has an insufficient color contrast
• An ADA issue: the clearance prices (red) have an insufficient color contrast
• An ADA issue: «Headers of footer columns have an insufficient color contrast»

[dmitrii-fediuk]

Fixed in 0.0.6.