WCAG Level AAA: Contrast (Enhanced) - Button

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

URL: https://test.update-your-capital-schemes.activetravelengland.gov.uk/schemes/64
Page title: 'Update your capital schemes - Active Travel England - GOV.UK'
H1 heading: 'BO-ATF-001 Manchester Road Corridor Phase 1' (scheme overview page)
Journey: 1.2a

Screenshot:

On the scheme overview page, as this is the default GOV.UK Design System button style, there are buttons 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: #00703C
Text colour: #FFFFFF
Font size: 1rem / 16px (mobile), 1.1875rem / 19px (desktop)
Contrast ratio: 6.21:1

Current code ref(s):

#main-content > div > div > section > form > button

<button type="submit" class="govuk-button" data-module="govuk-button">
   Confirm
</button>

CSS:

.govuk-button
{
   […]
   font-weight: 400;
   font-size: 16px;
   font-size: 1rem;
   […]
   color: #fff;
   background-color: #00703c;
   […]
}

CSS:

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

Examples of additional instances:

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

  Current code ref(s):

  #main-content > div > div > form > div.govuk-button-group > button

  <button type="submit" class="govuk-button" data-module="govuk-button">
     Confirm
  </button>

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