EVOLIZE Run a free assessment

Accessibility assessment of thelapelproject.com

Automated technical assessment of 5 publicly accessible pages · Scanned 13 Aug 2026. Inspected 5 of 5 selected pages.

32findings detected
9critical + high
5pages inspected

What to fix first

  1. Critical Buttons have no accessible name
  2. High Hidden elements can still receive keyboard focus
  3. High Hidden elements can still receive keyboard focus
  4. High Hidden elements can still receive keyboard focus
  5. High Interactive controls are not keyboard-accessible

Findings

Critical

Buttons have no accessible name

Interactive buttons expose no accessible name, so their purpose cannot be determined by assistive technology.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 4.1.2 Name, Role, Value (Level A) Ref 18OELL
Affected pagehttps://www.thelapelproject.com/products/the-vice
Element.slick-next
Markup
<button type="button" class="slick-next slick-arrow" style="display: block;" aria-disabled="false">
How to fixAdd an accessible name to the button, either by including text within the button element or by using the aria-label or aria-labelledby attributes to provide a text description of the button's purpose.
High

Hidden elements can still receive keyboard focus

An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.

Component 4 affected pages 16 instances WCAG WCAG 2.1 SC 2.4.3 Focus Order (Level A) Ref UKXUEY
Affected pagehttps://www.thelapelproject.com/
Elementa#DrawerLabel-how-it-works
Accessible nameHow It Works
Markup
<a href="/pages/how-to-apply" class="drawer__nav-link" id="DrawerLabel-how-it-works">How It Works</a>
How to fixTo fix this issue, ensure that the link is either removed from the tab order or made visible when it receives focus. This can be achieved by adding a CSS rule to display the link when it has focus, or by using JavaScript to remove the link from the tab order when it's not visible.
High

Hidden elements can still receive keyboard focus

An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.

Component 4 affected pages 8 instances WCAG WCAG 2.1 SC 2.4.3 Focus Order (Level A) Ref XZA64T
Affected pagehttps://www.thelapelproject.com/
Elementdiv#NavDrawer > div > form > input
Accessible nameSearch
Markup
<input type="search" name="q" placeholder="Search" aria-label="Search" class="drawer__search-input">
How to fixTo fix this issue, ensure that the hidden element is removed from the tab order by setting the 'tabindex' attribute to '-1' or by using 'display: none' or 'visibility: hidden' CSS properties to completely hide the element from both screen readers and sighted users.
High

Hidden elements can still receive keyboard focus

An element is not visible but remains in the tab order, so a sighted keyboard user loses track of focus when it lands there.

Component 4 affected pages 16 instances WCAG WCAG 2.1 SC 2.4.3 Focus Order (Level A) Ref JW38TV
Affected pagehttps://www.thelapelproject.com/
Elementdiv > ul > li:nth-of-type(1) > div:nth-of-type(1) > div > button
Accessible nameExpand menu Collapse menu
Markup
<button type="button" data-aria-controls="DrawerLinklist-how-it-works" class="text-link drawer__nav-toggle-btn drawer__meganav-toggle" aria-expanded="false" aria-controls="DrawerLinklist-how-it-works">
                  <span class="drawer__nav-toggle--open">
                    <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-plus" viewBox="0 0 22 21"><path d="M12 11.5h9.5v-2H12V0h-2v9.5H.5v2H10V21h2v-9.5z" fill="#000" fill-rule="evenodd"></path></svg>
                    <span class="icon__fallback-text">Expand menu</span>
                  </span>
             …
How to fixEnsure that all interactive elements are visible when they receive keyboard focus. Consider removing the element from the tab order or making it visible when focused.
High

Interactive controls are not keyboard-accessible

A control that responds to clicks (a clickable element or an ARIA widget) cannot receive keyboard focus, so keyboard and switch users cannot operate it.

Component 1 affected page 4 instances WCAG WCAG 2.1 SC 2.1.1 Keyboard (Level A) Ref L79O4P
Affected pagehttps://www.thelapelproject.com/
Elementdiv#Slideshow-slideshow > div > div > div:nth-of-type(2)
Accessible name<div class="hero__image hero__image--1506107394499" style="background-image: url('//www.thelapelproject.com/cdn/shop/files/4024_Proof_1_SMG_Blue_Website_Horizontal_2048x.png?v=1614325412');"></div> TRANSFORM IN SECONDS! Previous slide Next slide Elevate your favorite SUIT or TUX in seconds
Roleoption
Markup
<div class="hero__slide hero__slide--1506107394499 slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1440px;">
          <div class="hero__slide">
            
              <noscript>
                <div class="hero__image hero__image--1506107394499" style="background-image: url('//www.thelapelproject.com/cdn/shop/files/4024_Proof_1_SMG_Blue_Website_Horizontal_2048x.png?v=1614325412');"></div>
              </noscript>
              
              <img class="hero__image hero__image--150…
How to fixAdd focusable semantics or a tabindex to the interactive control to enable keyboard access. Ensure that the control can be reached and activated using a keyboard.
High

IDs used in ARIA and labels must be unique

IDs used in ARIA and labels must be unique

Component 4 affected pages 4 instances WCAG WCAG SC 4.1.2 Ref AM7PYL
Affected pagehttps://www.thelapelproject.com/
Element#SiteNavSearchCart > .site-header__search[action="/search"][method="get"] > .site-header__search-inner > .site-header__search-input[type="search"][name="q"]
Accessible nameSearch
Markup
<input type="search" name="q" id="SiteNavSearch" placeholder="Search" aria-label="Search" class="site-header__search-input">
How to fixUpdate the HTML to use a unique ID for the ARIA label and the form element. For example, use 'SiteNavSearchLabel' for the label and 'SiteNavSearchInput' for the input field.
High

ARIA input fields must have an accessible name

ARIA input fields must have an accessible name

Component 1 affected page 1 instance WCAG WCAG SC 4.1.2 Ref 6A2Z4D
Affected pagehttps://www.thelapelproject.com/
Element.slick-track
Accessible name<div class="hero__image hero__image--1503759413501" style="background-image: url('//www.thelapelproject.com/cdn/shop/files/JCC_3667_2048x.jpg?v=1614288888');"></div> STYLE YOUR WEDDING Previous slide Next slide Get the peak black velvet lapel <div class="hero__image hero__image--1506107394499" style="background-image: url('//www.thelapelproject.com/cdn/shop/files/4024_Proof_1_SMG_Blue_Website_Horizontal_2048x.png?v=1614325412');"></div> TRANSFORM IN SECONDS! Previous slide Next slide Elevate your favorite SUIT or TUX in seconds <div class="hero__image hero__image--placeholder" style="background-image: url('//www.thelapelproject.com/cdn/shop/files/GC-Media-322_2048x.jpg?v=1683826244');"></div> Your Suit's New Secret Weapon Previous slide Next slide View our latest styles <div class="hero__image hero__image--1574699963019" style="background-image: url('//www.thelapelproject.com/cdn/shop/files/pic_2_2048x.jpg?v=1614323099');"></div> Look your Best Previous slide Next slide with our trimmed lapels <div class="hero__image hero__image--1503759413501" style="background-image: url('//www.thelapelproject.com/cdn/shop/files/JCC_3667_2048x.jpg?v=1614288888');"></div> STYLE YOUR WEDDING Previous slide Next slide Get the peak black velvet lapel <div class="hero__image hero__image--1506107394499" style="background-image: url('//www.thelapelproject.com/cdn/shop/files/4024_Proof_1_SMG_Blue_Website_Horizontal_2048x.png?v=1614325412');"></div> TRANSFORM IN SECONDS! Previous slide Next slide Elevate your favorite SUIT or TUX in seconds
Rolelistbox
Markup
<div class="slick-track" role="listbox" style="opacity: 1; width: 8640px; transform: translate3d(-1440px, 0px, 0px);">
How to fixAdd an aria-label or aria-labelledby attribute to the listbox element to provide a text description of its purpose, or ensure that the element's content is descriptive enough to serve as its name.
High

Interactive controls must not be nested

Interactive controls must not be nested

Component 1 affected page 1 instance WCAG WCAG SC 4.1.2 Ref T2XXS3
Affected pagehttps://www.thelapelproject.com/
Element.slick-current
Accessible name<div class="hero__image hero__image--1506107394499" style="background-image: url('//www.thelapelproject.com/cdn/shop/files/4024_Proof_1_SMG_Blue_Website_Horizontal_2048x.png?v=1614325412');"></div> TRANSFORM IN SECONDS! Previous slide Next slide Elevate your favorite SUIT or TUX in seconds
Roleoption
Markup
<div class="hero__slide hero__slide--1506107394499 slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1440px;">
How to fixEnsure that interactive controls are not nested inside other interactive controls. Review the HTML structure and ARIA roles to identify and separate the nested controls.
High

ARIA hidden element must not be focusable or contain focusable elements

ARIA hidden element must not be focusable or contain focusable elements

Component 1 affected page 1 instance WCAG WCAG SC 4.1.2 Ref 5V1DVD
Affected pagehttps://www.thelapelproject.com/products/the-vice
Elementdiv[data-slick-index="3"]
Accessible nameMiami's Vice Bow Tie
Markup
<div class="product-single__thumbnail-item  slick-slide" data-slick-index="3" aria-hidden="true" style="width: 101px;">
How to fixEnsure that elements with aria-hidden=true do not contain focusable elements, or remove the aria-hidden attribute if the element should be accessible to screen readers and other assistive technologies.
Medium

Content sits outside any landmark region

Meaningful content is not contained in a landmark (header/nav/main/footer/aside), so assistive-technology users cannot reach it via landmark navigation.

Component 4 affected pages 4 instances WCAG WCAG 2.1 SC 1.3.1 Info and Relationships (Level A) Ref EGJ4ZD
Affected pagehttps://www.thelapelproject.com/
Elementdiv#NavDrawer > div > ul > li:nth-of-type(1)
Accessible nameHow It Works Expand menu Collapse menu Information
Markup
<li class="drawer__nav-item">
            <div class="drawer__nav-has-sublist">
              <a href="/pages/how-to-apply" class="drawer__nav-link" id="DrawerLabel-how-it-works">How It Works</a>
              <div class="drawer__nav-toggle">
                <button type="button" data-aria-controls="DrawerLinklist-how-it-works" class="text-link drawer__nav-toggle-btn drawer__meganav-toggle" aria-expanded="false" aria-controls="DrawerLinklist-how-it-works">
                  <span class="drawer__nav-toggle--open">
                    <svg aria-hidden="true" focusable="false" role="presentation"…
How to fixEnsure all meaningful content is wrapped within appropriate landmark elements (e.g., <header>, <nav>, <main>, <footer>, <aside>) to facilitate easy navigation for users of assistive technologies.
Medium

Navigation regions are not distinguishable

The page has multiple navigation landmarks but they lack accessible names, so screen reader users cannot tell them apart.

Component 4 affected pages 4 instances WCAG WCAG 2.1 SC 1.3.1 Info and Relationships (Level A) Ref RSCOJ6
Affected pagehttps://www.thelapelproject.com/
Elementnav#StickyNav
Accessible nameMenu Site navigation How It Works Information Lapels Notch Peak Latest Styles Shawl Collections Bowties Loafers Gallery Special Events Prom Weddings Customizer Connect Custom Lapels Search Search Cart Account
Rolenavigation
Markup
<nav class="nav-bar small--hide" role="navigation" id="StickyNav">
        <div class="page-width">
          <div class="grid grid--table">
            <div class="grid__item four-fifths" id="SiteNavParent">
              <button type="button" class="text-link site-nav__link site-nav__link--compressed js-drawer-open-left" id="SiteNavCompressed" aria-expanded="false">
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-hamburger" viewBox="0 0 32 32"><path fill="#444" d="M4.889 14.958h22.222v2.222H4.889v-2.222zM4.889 8.292h22.222v2.222H4.889V8.292zM4.8…
How to fixAdd a unique and descriptive accessible name to each navigation landmark using the 'aria-label' or 'aria-labelledby' attribute. This will help screen readers announce the purpose of each navigation region, making it easier for users to navigate the page.
Medium

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 4 affected pages 4 instances WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref PPQXR9
Affected pagehttps://www.thelapelproject.com/
Element#customer_login_link
Accessible nameAccount
Markup
<a href="https://www.thelapelproject.com/customer_authentication/redirect?locale=en&amp;region_country=US" id="customer_login_link">Account</a>
How to fixIncrease the contrast between the text color and background color of the 'Account' link to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3.
Medium

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 4 affected pages 4 instances WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref Y0YXDQ
Affected pagehttps://www.thelapelproject.com/
Element.site-nav__link-menu-label
Accessible nameMenu
Markup
<span class="site-nav__link-menu-label">Menu</span>
How to fixIncrease the contrast between the text color and background color of the 'Menu' link to meet the minimum contrast ratio thresholds, such as using a darker or lighter color for the text or background.
Medium

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 4 instances WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref I9KRP2
Affected pagehttps://www.thelapelproject.com/
Element#shopify-section-featured-products > .page-width > .section-block > .grid--uniform.collection.grid--no-gutters > .medium-up--one-fifth.small--one-half.grid__item:nth-child(3) > .product-card > .product-tag.product-tag--absolute[aria-hidden="true"]
Accessible nameSale
Markup
<div class="product-tag product-tag--absolute" aria-hidden="true">
      Sale
    </div>
How to fixIncrease the contrast between the text color and background color of the 'Sale' tag to meet the minimum contrast ratio thresholds as defined in WCAG 2.1 SC 1.4.3.
Medium

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 4 instances WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref H1CLKW
Affected pagehttps://www.thelapelproject.com/
Element#shopify-section-featured-products > .page-width > .section-block > .grid--uniform.collection.grid--no-gutters > .collection__card--first.medium-up--one-fifth.small--one-half > .product-card > .product-tag.product-tag--absolute[aria-hidden="true"]
Accessible nameSale
Markup
<div class="product-tag product-tag--absolute" aria-hidden="true">
      Sale
    </div>
How to fixIncrease the contrast between the text color and background color of the 'Sale' tag to meet the WCAG 2.1 minimum contrast ratio thresholds.
Medium

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 2 instances WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref YG90CL
Affected pagehttps://www.thelapelproject.com/
Elementa[href$="popular-products"] > .featured-card__header.featured-card__header--background > .featured-card__action
Accessible nameView all
Markup
<span class="featured-card__action">View all</span>
How to fixIncrease the contrast between the text color and its background by adjusting either the text color or the background color to meet the minimum contrast ratio as defined by WCAG 2.1 SC 1.4.3.
Medium

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 2 instances WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref 0O12R5
Affected pagehttps://www.thelapelproject.com/
Element#VideoSection--257753ad-c546-4129-be16-2a1b36d0e942 > .video-section__cover > .video-section__cover-content > .video-section__load-player-button > .video-section__load-player-text.h1
Accessible nameWATCH HOW TO TRANSFORM YOUR SUIT!
Markup
<div class="h1 video-section__load-player-text">WATCH HOW TO TRANSFORM YOUR SUIT!</div>
How to fixAdjust the background or text color to meet the minimum contrast ratio of 4.5:1 for normal text, as per WCAG 2.1 guidelines. Use a color contrast analyzer tool to find a suitable color combination.
Medium

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 2 instances WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref OEPQ3F
Affected pagehttps://www.thelapelproject.com/products/the-vice
Elementem > a:nth-child(1)
Accessible nameFAQ page
Markup
<a style="color: #6fcee4;" href="https://www.thelapelproject.com/pages/faq">FAQ page</a>
How to fixIncrease the contrast between the text color and the background color by using a color with a higher contrast ratio, such as changing the text color to a darker or lighter shade.
Medium

ARIA attributes have invalid values

ARIA attributes reference ids that do not exist or hold invalid values, breaking the accessibility tree.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 4.1.2 Name, Role, Value (Level A) Ref GGOFYP
Affected pagehttps://www.thelapelproject.com/
Element.slick-current > .hero__slide > .hero__text-wrap > .page-width > .hero__text-content > .hero__arrows.small--hide[aria-controls="Hero"]
Accessible namePrevious slide Next slide
Markup
<div class="hero__arrows small--hide" aria-controls="Hero">
How to fixVerify that all ARIA attributes have valid values and reference existing ids. Check the 'aria-controls' attribute on the element with the class 'hero__arrows small--hide' to ensure it references a valid id.
Medium

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref HEG75I
Affected pagehttps://www.thelapelproject.com/pages/contact-us
Elementinput[value="Send"]
Markup
<input type="submit" class="btn" value="Send">
How to fixIncrease the contrast between the text color and background color of the 'Send' button to meet the minimum contrast ratio thresholds.
Medium

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref 7PFDLT
Affected pagehttps://www.thelapelproject.com/
Element.featured-card.featured-card--cover[href$="latest-styles"] > .featured-card__header.featured-card__header--background > .featured-card__action
Accessible nameView all
Markup
<span class="featured-card__action">View all</span>
How to fixIncrease the contrast between the text color and its background by adjusting either the text color or the background color to meet the minimum contrast ratio as defined by WCAG 2.1 SC 1.4.3.
Medium

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref JWW8OM
Affected pagehttps://www.thelapelproject.com/cart
Elementa[href$="all"]
Accessible nameContinue browsing
Markup
<a href="/collections/all" class="btn">Continue browsing</a>
How to fixIncrease the contrast between the text color and background color of the button to meet the minimum contrast ratio thresholds, such as using a darker or lighter color for the text or background.
Low

Touch targets are too small

Interactive controls are smaller than the 24×24px minimum target size, making them hard to activate reliably by touch.

Component 4 affected pages 4 instances WCAG WCAG 2.2 SC 2.5.8 Target Size (Minimum) (Level AA) Ref 1ZLBN4
Affected pagehttps://www.thelapelproject.com/
Element#NotificationPromoClose
Accessible nameClose
Markup
<button type="button" class="text-link notification__close" id="NotificationPromoClose">
How to fixIncrease the size of the close button to at least 24x24 pixels or ensure there is sufficient space around it to meet the minimum target size requirement.
Low

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 2 instances WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref VB16BS
Affected pagehttps://www.thelapelproject.com/
Elementa[href$="all"] > .flex--center-vertical.flex > .flex__item > .emphasized-title.link-block__cta.h1
Accessible nameThe Collection
Markup
<span class="emphasized-title h1 link-block__cta">
                The Collection
              </span>
How to fixIncrease the contrast between the text color and background color by using a color with a higher contrast ratio, or provide an alternative way for users to access the information.
Low

ARIA attributes have invalid values

ARIA attributes reference ids that do not exist or hold invalid values, breaking the accessibility tree.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 4.1.2 Name, Role, Value (Level A) Ref JSWI1F
Affected pagehttps://www.thelapelproject.com/
Element.slick-current
Accessible name<div class="hero__image hero__image--1506107394499" style="background-image: url('//www.thelapelproject.com/cdn/shop/files/4024_Proof_1_SMG_Blue_Website_Horizontal_2048x.png?v=1614325412');"></div> TRANSFORM IN SECONDS! Previous slide Next slide Elevate your favorite SUIT or TUX in seconds
Roleoption
Markup
<div class="hero__slide hero__slide--1506107394499 slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 1440px;">
How to fixVerify that all ARIA attributes have valid values and that the referenced ids exist and are correctly formatted. Update the 'aria-describedby' attribute to reference a valid id or remove it if it's not necessary.
Low

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref J0MOEU
Affected pagehttps://www.thelapelproject.com/
Element.slick-current > .hero__slide > .hero__text-wrap > .page-width > .hero__text-content > .hero__subtitle.hero__link
Accessible nameElevate your favorite SUIT or TUX in seconds
Markup
<a href="/products/black-peak-velvet-lapel" class="hero__subtitle hero__link" tabindex="0">
                        Elevate your favorite SUIT or TUX in seconds
                      </a>
How to fixIncrease the contrast between the text color and the background color by using a darker or lighter shade, or add a background overlay to improve readability.
Low

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref U0WQJ9
Affected pagehttps://www.thelapelproject.com/
Elementa[href$="accessories"] > .collection-card__meta > .collection-card__subtext
Accessible nameView all
Markup
<p class="collection-card__subtext">View all</p>
How to fixIncrease the contrast between the text color and its background by adjusting either the text color or the background color to meet the minimum contrast ratio requirements as defined by WCAG 2.1 SC 1.4.3.
Low

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref PG55JK
Affected pagehttps://www.thelapelproject.com/
Element.link-block.lazyloaded[href$="custom-orders"] > .flex--center-vertical.flex > .flex__item > .emphasized-title.link-block__cta.h1
Accessible nameDesign Your Own
Markup
<span class="emphasized-title h1 link-block__cta">
                Design Your Own
              </span>
How to fixIncrease the contrast between the text color and the background color by adjusting the CSS styles for the .emphasized-title class to meet the minimum contrast ratio requirements.
Low

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref 3348HW
Affected pagehttps://www.thelapelproject.com/
Element.collection-card[href$="wedding-prom"] > .collection-card__meta > .collection-card__title.h1
Accessible nameNotch
Markup
<p class="h1 collection-card__title">Notch</p>
How to fixIncrease the contrast between the text color and its background by adjusting either the text color or the background color to meet the minimum contrast ratio as defined by WCAG 2.1 SC 1.4.3.
Low

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref BBK7MT
Affected pagehttps://www.thelapelproject.com/
Elementa[href$="accessories"] > .collection-card__meta > .collection-card__title.h1
Accessible nameAccessories
Markup
<p class="h1 collection-card__title">Accessories</p>
How to fixIncrease the contrast between the text color and its background by adjusting either the text color or the background color to meet the minimum contrast ratio as defined by WCAG 2.1 SC 1.4.3.
Low

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref TZCI7O
Affected pagehttps://www.thelapelproject.com/
Element.collection-card[href$="wedding-prom"] > .collection-card__meta > .collection-card__subtext
Accessible nameView all
Markup
<p class="collection-card__subtext">View all</p>
How to fixIncrease the contrast between the text color and the background color by adjusting the CSS styles for the element with class 'collection-card__subtext' to meet the minimum contrast ratio thresholds as defined by WCAG 2.1 SC 1.4.3.
Low

Text has insufficient colour contrast

Text and background colours do not meet the minimum contrast ratio, reducing legibility.

Component 1 affected page 1 instance WCAG WCAG 2.1 SC 1.4.3 Contrast (Minimum) (Level AA) Ref V5Y96C
Affected pagehttps://www.thelapelproject.com/
Element.slick-current > .hero__slide > .hero__text-wrap > .page-width > .hero__text-content > .hero__title-wrap > .hero__title.hero__title--has-link > .hero__link
Accessible nameTRANSFORM IN SECONDS!
Markup
<a href="/products/black-peak-velvet-lapel" class="hero__link" tabindex="0">
                        
                        TRANSFORM IN SECONDS!
                        
                          </a>
How to fixIncrease the contrast between the text color and background color to meet the minimum contrast ratio thresholds, such as using a darker or lighter background, or a more vibrant text color.

Keep thelapelproject.com monitored

This is a point-in-time assessment. Evolize monitoring re-scans the site on a schedule, flags new and recurring issues, tracks changes over time, and verifies fixes after you make them.

Start monitoring
About this assessment.
  • Automated technical analysis of publicly accessible website surfaces only — no credentials, private systems, or source-code access.
  • Findings apply to the pages and states successfully inspected; automated analysis may not detect every accessibility issue.
  • Results reflect the site at the scan date and may have changed since.
  • This is technical information, not legal advice.

Request a correction or removal · How Evolize scans