WCAG Level AAA: Contrast (Enhanced) - Link

[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_01

URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes
Page title: 'Update your capital schemes - Active Travel England - GOV.UK'
H1 heading: 'Your schemes'
Journey: 1.1a

Screenshot:

On the 'Update your capital schemes' page and subsequent pages throughout the journey, as this is the default GOV.UK Design System colour, there are links that have 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: #1D70b8
Font size: 1.1875rem / 19px
Contrast ratio: 5.17:1

Current code ref(s):

body > div.govuk-width-container > div > p > span > a

<a class="govuk-link" href="mailto:[email protected]">
   Feedback
</a>

CSS:

.govuk-link:link
{
   color: #1d70b8;
}

Examples of additional instances:

• URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes
  Page title: 'Update your capital schemes - Active Travel England - GOV.UK'
  H1 heading: 'Your schemes'
  Journey: 1.1a

  Current code ref(s):

  #main-content > table > tbody > tr:nth-child(1) > td:nth-child(1) > a

  <a class="govuk-link" href="/schemes/64">
     ATE00064
  </a>

• URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes
  Page title: 'Update your capital schemes - Active Travel England - GOV.UK'
  H1 heading: 'Your schemes'
  Journey: 1.1a

  Current code ref(s):

  #main-content > table > tbody > tr:nth-child(2) > td:nth-child(1) > a

  <a class="govuk-link" href="/schemes/65">
     ATE00065
  </a>

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