WCAG Level AAA: Contrast (Enhanced) - Error summary

[Sparrow0hawk]

Low Priority WCAG Level AAA

Contrast (Enhanced)

Colours used failed to meet the required contrast ratios to meet the WCAG 2.2 enhanced success criteria.

WCAG Reference:

1.4.6 Contrast (Enhanced) (Level AAA)
Understanding Contrast (Enhanced) | How to Meet Contrast (Enhanced)

Issue ID: DAC_Contrast_Enhanced_03

URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes/64/spend-to-date
Page title: 'Error: Update your capital schemes - Active Travel England - GOV.UK'
H1 heading: 'Change spend to date'
Journey: 1.3b

Screenshot:

On the 'Change spend to date' page and subsequent pages throughout the journey, as this is the default GOV.UK Design System error colour, there is error message text that has insufficient contrast to meet WCAG 2.2 Contrast (Enhanced) requirements.

This can affect low vision users, who require higher levels of contrast to be able to comfortably read text.

Contrast Values:

Background colour: #FFFFFF
Text colour: #D4351C
Font size: 1rem / 16px (mobile), 1.1875rem / 19px (desktop)
Contrast ratio: 4.86:1

Current code ref(s):

#main-content > div > div > div > div > div > ul

<ul class="govuk-list govuk-error-summary__list">
   <li>
      <a href="#amount">
         Enter spend to date
      </a>
   </li>
</ul>

CSS:

.govuk-error-summary__list a:link,
.govuk-error-summary__list a:visited
{
   color: #d4351c;
}

CSS:

.govuk-list,
main ul,
main ol
{
   […]
   font-weight: 400;
   font-size: 16px;
   font-size: 1rem;
   […]
}

@media (min-width: 40.0625em)
.govuk-list,
main ul,
main ol
{
   font-size: 19px;
   font-size: 1.1875rem;
   […]
}

Examples of additional instances:

• URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes/64/milestones
  Page title: 'Error: Update your capital schemes - Active Travel England - GOV.UK'
  H1 heading: 'Change milestone dates'
  Journey: 1.5a

Additional instances of this issue may exist on other pages throughout the website; wherever this issue occurs, they too will need to be resolved.

Solution:

Ensure that all text and any elements that provide information to the user pass colour contrast (enhanced).

For sites to meet AAA, they must comply with WCAG 2.2 checkpoint 1.4.6 for colour contrast.

As far as contrast ratio is concerned, it must at least be:

1. if text is not bold and its size is less than 18pt/24px/1.5em/150%: 7:1 for AAA level
2. if text is not bold and its size is at least 18pt/24px/1.5em/150%: 4.5:1 for AAA level
3. if text is bold and its size is less than 14pt/19px/1.2em/118%: 7:1 for AAA level
4. if text is bold and its size is at least 14pt/19px/1.2em/118%: 4.5:1 for AAA level