ADA Shield Report — ColourPop Cosmetics

§1 Executive Summary

Total violations detected

Distinct WCAG rules violated

🔴 High litigation-risk

7 / 3

🟡 Medium / 🟢 Low

⚠ Exposure: CRITICAL

ColourPop has 34 high-tier violations concentrated in two categories: color contrast failures throughout the site's pink footer (25 instances) and unnamed interactive controls (9 instances). The beauty industry has seen a surge in ADA litigation — fashion and beauty brands have been among the most frequently named defendants in recent federal filings. ColourPop's footer renders nearly all navigation links inaccessible to low-vision users: every "Contact Us," "About Us," "FAQ," "Terms," and "Privacy Policy" link fails WCAG 1.4.3 contrast.

Rule	WCAG Criterion	Instances	Risk Tier
color-contrast	1.4.3 Contrast (Minimum) — Level AA	28	🔴 High
link-name	4.1.2 Name, Role, Value — Level A	7	🔴 High
button-name	4.1.2 Name, Role, Value — Level A	2	🔴 High
aria-valid-attr-value	4.1.2 Name, Role, Value — Level A	5	🟡 Medium
region	Best Practice (landmark navigation)	2	🟡 Medium
empty-heading	2.4.6 Headings and Labels — Level AA	2	🟢 Low
heading-order	1.3.1 Info and Relationships — Level A	1	🟢 Low

🔴 HIGH LITIGATION-RISK VIOLATIONS (34 total)

🔴 HIGH color-contrast WCAG 1.4.3 — Level AA

Catastrophic footer color contrast — entire navigation inaccessible

instances

Effort: Trivial

What's wrong

ColourPop's pink footer uses #FF849E as background with #FDF2E7 (near-white) foreground text. The resulting contrast ratio is 2.1:1 — less than half the required 4.5:1 for normal text and 3:1 for large text. This affects all footer navigation links ("Contact Us," "About Us," "FAQ," "Careers," "Terms," "Privacy Policy"), footer heading labels ("help," "legal"), and the promotional announcement bar.

Why this matters legally

Every blind, low-vision, or color-deficient shopper who depends on contrast to read cannot access the footer navigation, legal disclosures, or shipping promotions. Under WCAG 2.1 Success Criterion 1.4.3, this is a Level AA failure — the minimum standard courts have applied in ADA e-commerce suits.

Affected elements (sample)

.text-p-light.gap-xs.md:flex h3.text-heading-6           → "help", "legal" headings
.gap-2xs > .pb-1 > a[href$="contact-us"]               → Contact Us link
.gap-2xs > .pb-1 > a[href$="about-us"]                 → About Us link
.gap-2xs > .pb-1 > a[href$="customerservice"]           → FAQ link
swiper-slide[aria-label="1 / 2"] > .inline-block        → announcement bar text
          

Copy-paste fix

/* Option A: darken footer background, keep light text */
/* #FF849E → #C44A6A achieves 4.52:1 contrast against #FDF2E7 */
footer,
[data-footer],
.footer-section {
  --color-footer-bg: #C44A6A;  /* was #FF849E */
  background-color: var(--color-footer-bg);
}

/* Option B (recommended): keep pink bg, use dark text */
footer .gap-2xs a,
footer .text-heading-6,
footer .inline-block {
  color: #1A1A1A;  /* 14.9:1 contrast on #FF849E — exceeds all thresholds */
}
          

Shopify theme settings approach:

// In config/settings_data.json:
{
  "footer_background": "#C44A6A",
  "footer_text_color": "#1A1A1A"
}
            

✓ One CSS variable change or theme settings update fixes all 25 instances.

🔴 HIGH color-contrast WCAG 1.4.3 — Level AA

Sale price text — pink on white fails contrast

Multiple

in product cards

Effort: Trivial

Sale and crossed-out price text uses #FF1D7C on white (#FFFFFF) — a contrast ratio of 3.67:1. For bold text under 18.66px, WCAG AA requires 4.5:1. Sale prices like "$61.00" and "$26.00" in product carousels fail this threshold.

Fix

/* Darken sale price color — still vibrant pink, now accessible */
.on-sale .text-t-foreground,
.price--sale {
  color: #D4006A;  /* 5.25:1 contrast on white */
}
          

🔴 HIGH color-contrast WCAG 1.4.3 — Level AA

Cookie consent "Preferences" button fails contrast

instance

Effort: Trivial

The .cc-btn.cc-settings "Preferences" button renders black text (#000000) on a brown background (#914920) — a contrast ratio of 3.17:1. Cookie consent interfaces that users cannot perceive create a specific barrier to exercising privacy rights.

Fix

/* Option A: darken the background */
.cc-btn.cc-settings {
  background-color: #6B3010;  /* 5.1:1 contrast against #000 text */
}

/* Option B: flip to white text */
.cc-btn.cc-settings {
  color: #FFFFFF;  /* 4.72:1 contrast on #914920 */
}
          

🔴 HIGH button-name WCAG 4.1.2 — Level A

Unnamed currency/country selector buttons — screen reader says "combobox, collapsed"

instances

Effort: Trivial

The currency selector in both the header and footer renders as <button role="combobox"> with value="US" but no visible text and no aria-label. A screen reader announces "combobox, collapsed" — the user has no idea what this control does.

Affected elements

#main-headercurrencyForm > country-select > button
#footer-legalcurrencyForm > country-select > button
          

Liquid fix (in currency-selector snippet)

{%- comment -%} Add aria-label describing what the control does {%- endcomment -%}
<button type="button"
        role="combobox"
        aria-haspopup="listbox"
        aria-label="{{ 'general.currency.label' | t }}: {{ localization.currency.iso_code }}"
        value="{{ localization.currency.iso_code }}"
        aria-controls="{{ form_id }}-currency-list"
        aria-expanded="false">
</button>
          

✓ Two-line change in the currency-selector snippet. Fixes both header and footer instances.

🔴 HIGH link-name WCAG 4.1.2 — Level A

7 unnamed product and icon links — navigation barrier for screen reader users

instances

Effort: Moderate

Seven links lack accessible text — no visible label, no aria-label, no title. These are product card links and icon navigation links (account, search, etc.) that rely on CSS-only visual labeling. A screen reader announces "link" with no context.

Liquid fix patterns

{%- comment -%} Product card link — add aria-label with product title and price {%- endcomment -%}
<a href="{{ product.url }}"
   aria-label="{{ product.title | escape }} — {{ product.price | money }}">
  <img src="{{ product.featured_image | img_url: '400x' }}"
       alt="{{ product.featured_image.alt | default: product.title | escape }}">
</a>

{%- comment -%} Icon navigation link (account, search) {%- endcomment -%}
<a href="{{ routes.account_url }}"
   aria-label="{{ 'customer.account.title' | t }}">
  {% render 'icon-account' %}
</a>
          

🟡 MEDIUM LITIGATION-RISK VIOLATIONS (7 total)

🟡 MEDIUM aria-valid-attr-value WCAG 4.1.2 — Level A

Invalid `aria-controls` references in Swiper carousels

instances

Effort: Moderate

Swiper.js carousel buttons reference panel IDs via aria-controls, but the IDs contain random hex suffixes generated at runtime (e.g., swiper-wrapper-dbb68355bbe7e05f). These truncated IDs don't match any element in the DOM, breaking the ARIA relationship that assistive technology relies on to navigate carousels.

JavaScript fix (post-initialization)

// After Swiper initializes, correct the aria-controls:
document.querySelectorAll('.swiper-button-prev, .swiper-button-next')
  .forEach(btn => {
    const swiper = btn.closest('.swiper');
    const wrapper = swiper?.querySelector('.swiper-wrapper');
    if (wrapper?.id) {
      btn.setAttribute('aria-controls', wrapper.id);
    } else {
      // Simpler: remove the broken attribute entirely
      btn.removeAttribute('aria-controls');
    }
  });
          

🟡 MEDIUM region Best Practice

Missing landmark regions — screen reader users can't skip to main content

instances

Effort: Moderate

Significant blocks of content are not contained within ARIA landmark regions (<main>, <nav>, etc.). Screen reader users who rely on landmark navigation cannot efficiently skip past the header and navigation to reach product content.

Liquid fix — layout/theme.liquid

<header role="banner">
  {'%'} section 'header' {'%'}
</header>

<main id="MainContent" role="main" tabindex="-1">
  {'{'{'}'{'{'} content_for_layout {'}'}{'}'{'}'}
</main>

<footer role="contentinfo">
  {'%'} section 'footer' {'%'}
</footer>
          

🟢 LOW LITIGATION-RISK VIOLATIONS (3 total)

🟢 LOW empty-heading WCAG 2.4.6 — Level AA 2 instances

Empty heading elements

Empty <h2> or <h3> tags that appear decorative are still announced by screen readers, causing confusion.

{%- comment -%} Only render heading if it has content {%- endcomment -%}
{%- if section.settings.title != blank -%}
  <h2>{'{'{'}'{'{'} section.settings.title {'}'}{'}'{'}'}}</h2>
{%- endif -%}
          

🟢 LOW heading-order WCAG 1.3.1 — Level A 1 instance

Non-sequential heading level

An <h4> appears without an <h3> parent, breaking the heading outline. Fix by restructuring heading levels to be sequential (h1 → h2 → h3) or changing the element to a styled paragraph.

§5 Fix Priority Order

Priority	Rule	Instances	Impact	Effort
1	color-contrast (footer)	25	Entire footer navigation inaccessible — fix today	Trivial (CSS)
2	button-name	2	Shopping path blocker; trivial to fix	Trivial (Liquid)
3	link-name	7	Navigation barrier for AT users	Moderate (Liquid)
4	color-contrast (sale + cookie)	3	Lower exposure; batch with brand design review	Trivial (CSS)
5	aria-valid-attr-value	5	Functional ARIA break; moderate complexity	Moderate (JS)
6	region, heading, empty-heading	5	Structural issues; batch in next sprint	Trivial

Developer time estimate

Items 1–3 (Priority fixes): 2–4 hours (mostly CSS)

Full remediation (all 7 rules): ~1 day including carousel JS fix

§1 Executive Summary

🔴 HIGH LITIGATION-RISK VIOLATIONS (34 total)

What's wrong

Why this matters legally

Affected elements (sample)

Copy-paste fix

Shopify theme settings approach:

Fix

Fix

Affected elements

Liquid fix (in currency-selector snippet)

Liquid fix patterns

🟡 MEDIUM LITIGATION-RISK VIOLATIONS (7 total)

JavaScript fix (post-initialization)

Liquid fix — layout/theme.liquid

🟢 LOW LITIGATION-RISK VIOLATIONS (3 total)

Empty heading elements

Non-sequential heading level

§5 Fix Priority Order

Developer time estimate

Ready to see what ADA Shield finds in your store?