← Back to summary

https://www.lisresilience.org/upcoming-trainings-and-events/ FAIL

Score: 94/100 • Errors: 1 • Warnings: 2 • Notices: 0
Tests Passed: 28/31 • Response Time: 3150ms
Target: WCAG 2.2 Level AA • Settle Delay: 2000ms • Audit Profile: wcag • Run Profile: desktop
Tags Used: wcag2a, wcag2aa, wcag21a, wcag21aa, wcag22a, wcag22aa
Excluded Rules: none

Errors (1)

color-contrast serious
Elements must meet minimum color contrast ratio thresholds
Learn more
nodes: 8
target .\!text-rhMedium
Fix any of the following: Element has insufficient color contrast of 3.84 (foreground color: #76797a, background color: #ebf1f4, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1
HTML snippet
<label for="month-selector" class="font-roboto text-xs font-medium text-rhWhite !text-rhMedium">Month</label>
target .gap-\[40px\].flex-col.flex:nth-child(2) > .py-\[24px\].md\:p-\[40px\].p-\[24px\] > .flex-row-reverse.gap-10.justify-start > .hidden.md\:flex.justify-start > .text-rhMedium.mb-1.mobile\:text-sm
Fix any of the following: Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
HTML snippet
<p class="text-xs mobile:text-sm font-roboto text-rhDark text-rhMedium mb-1">Tue</p>
target .md\:pr-40.w-full.flex-col > .bg-rhLightGreen.py-1.rounded-3xl > .\!text-rhGreen.mobile\:text-sm.text-xs
Fix any of the following: Element has insufficient color contrast of 4.26 (foreground color: #267371, background color: #cae7e7, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
HTML snippet
<p class="text-xs mobile:text-sm font-roboto text-rhDark font-roboto font-medium !text-rhGreen">SRC Events</p>
target .gap-\[40px\].flex-col.flex:nth-child(2) > .py-\[24px\].md\:p-\[40px\].p-\[24px\] > .flex-row-reverse.gap-10.justify-start > .md\:pr-40.w-full.flex-col > .text-rhMedium.mb-1.mobile\:text-sm:nth-child(2)
Fix any of the following: Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
HTML snippet
<p class="text-xs mobile:text-sm font-roboto text-rhDark text-rhMedium mb-1">March 31 @ 9:30am – 2:30pm</p>
target .gap-\[40px\].flex-col.flex:nth-child(2) > .py-\[24px\].md\:p-\[40px\].p-\[24px\] > .flex-row-reverse.gap-10.justify-start > .md\:pr-40.w-full.flex-col > .text-rhMedium.mb-1.mobile\:text-sm:nth-child(4)
Fix any of the following: Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
HTML snippet
<p class="text-xs mobile:text-sm font-roboto text-rhDark font-medium text-rhMedium mb-1">In-person, Gateway Community College, 20 Church St, New Haven, CT 06510</p>
target .gap-\[40px\].flex-col.flex:nth-child(4) > .py-\[24px\].md\:p-\[40px\].p-\[24px\] > .flex-row-reverse.gap-10.justify-start > .hidden.md\:flex.justify-start > .text-rhMedium.mb-1.mobile\:text-sm
Fix any of the following: Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
HTML snippet
<p class="text-xs mobile:text-sm font-roboto text-rhDark text-rhMedium mb-1">Thu</p>
target .gap-\[40px\].flex-col.flex:nth-child(4) > .py-\[24px\].md\:p-\[40px\].p-\[24px\] > .flex-row-reverse.gap-10.justify-start > .md\:pr-40.w-full.flex-col > .text-rhMedium.mb-1.mobile\:text-sm:nth-child(2)
Fix any of the following: Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
HTML snippet
<p class="text-xs mobile:text-sm font-roboto text-rhDark text-rhMedium mb-1">June 25 @ 9:30am – 4:30pm</p>
target .gap-\[40px\].flex-col.flex:nth-child(4) > .py-\[24px\].md\:p-\[40px\].p-\[24px\] > .flex-row-reverse.gap-10.justify-start > .md\:pr-40.w-full.flex-col > .text-rhMedium.mb-1.mobile\:text-sm:nth-child(4)
Fix any of the following: Element has insufficient color contrast of 3.94 (foreground color: #808080, background color: #ffffff, font size: 12.0pt (16px), font weight: normal). Expected contrast ratio of 4.5:1
HTML snippet
<p class="text-xs mobile:text-sm font-roboto text-rhDark font-medium text-rhMedium mb-1">In-person, City University of New York (CUNY) Graduate Center&nbsp;(365 5th Ave, New York, NY)</p>

Incomplete (manual review) (2)

aria-valid-attr-value critical
ARIA attributes must conform to valid values
Manual review required to confirm this issue.
Learn more
nodes: 1
target #search-btn
Fix all of the following: Unable to determine if aria-controls referenced ID exists on the page while using aria-haspopup: aria-controls="search-overlay"
HTML snippet
<button type="button" class="md:!flex gap-2 items-center h-[48px] min-h-[48px] font-roboto text-sm font-medium text-rhWhite px-4 py-3" @click="$store.searchOpen = true" id="search-btn" aria-haspopup="dialog" aria-controls="search-overlay">
color-contrast serious
Elements must meet minimum color contrast ratio thresholds
Manual review required to confirm this issue.
Learn more
nodes: 7
target .float-left.dropdown.overflow-hidden:nth-child(1) > .dropbtn.min-h-\[48px\][aria-haspopup="true"] > .inline-flex
Fix any of the following: Element's background color could not be determined due to a background image
HTML snippet
<span class="inline-flex items-center gap-2">
target .float-left.dropdown.overflow-hidden:nth-child(2) > .dropbtn.min-h-\[48px\][aria-haspopup="true"] > .inline-flex
Fix any of the following: Element's background color could not be determined due to a background image
HTML snippet
<span class="inline-flex items-center gap-2">
target .float-left.dropdown.overflow-hidden:nth-child(3) > .dropbtn.min-h-\[48px\][aria-haspopup="true"] > .inline-flex
Fix any of the following: Element's background color could not be determined due to a background image
HTML snippet
<span class="inline-flex items-center gap-2">
target .float-left.dropdown.overflow-hidden:nth-child(4) > .dropbtn.min-h-\[48px\][aria-haspopup="true"] > .inline-flex
Fix any of the following: Element's background color could not be determined due to a background image
HTML snippet
<span class="inline-flex items-center gap-2">
target #search-btn
Fix any of the following: Element's background color could not be determined due to a background image
HTML snippet
<button type="button" class="md:!flex gap-2 items-center h-[48px] min-h-[48px] font-roboto text-sm font-medium text-rhWhite px-4 py-3" @click="$store.searchOpen = true" id="search-btn" aria-haspopup="dialog" aria-controls="search-overlay">
target h1
Fix any of the following: Element's background color could not be determined because it is overlapped by another element
HTML snippet
<h1 class="text-sm desktop:text-md font-roboto text-rhDark text-rhTranslucentWhite h1ash3">Upcoming Trainings and Events</h1>
target .text-rhTranslucentWhite.mobile\:text-sm.text-xs
Fix any of the following: Element's background color could not be determined because it is overlapped by another element
HTML snippet
<p class="text-xs mobile:text-sm font-roboto text-rhDark text-rhTranslucentWhite">Find upcoming virtual and in-person trainings and events.</p>