color-contrast - Elements must meet minimum color contrast ratio thresholds
Impact: serious
Description: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
Help: Elements must meet minimum color contrast ratio thresholds
Tags: cat.color, wcag2aa, wcag143, TTv5, TT13.c, EN-301-549, EN-9.1.4.3, ACT
Affected Elements (40)
<a class="btn btn-sm btn-primary" href="https://ccmnet.ddev.site/form/affinity-group-request">Request a Group</a>
Target: #requestAffinityWide > .btn-primary.btn-sm.btn
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 10.5pt (14px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(1) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(2) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(3) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(4) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(5) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(6) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(7) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(8) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(9) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(10) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(11) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(12) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(13) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(14) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(15) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(16) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(17) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(18) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(19) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(20) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(21) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(22) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(23) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(24) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(25) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(26) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(27) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(28) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(29) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(30) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(31) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(32) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(33) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(34) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(35) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(36) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(37) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(38) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1
<small>Join</small>
Target: .border-x-0.border-b.border-t-0:nth-child(39) > .views-field-nid[headers="view-nid-table-column"] > .btn-small.btn-secondary-outline.btn-md-teal > small
Failure Summary:
Fix any of the following:
Element has insufficient color contrast of 2.68 (foreground color: #ffffff, background color: #06a9e5, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1