← Back to capabilities

Accessibility Application

WCAG 2.2 compliance at the application level — selected states, button roles, and interaction semantics for compound widgets.

Light Theme — Body Text Contrast

Body text resolves to near-black (#000000) via CupertinoColors.label displayed against the light scaffold (#F6F6F6). This token covers all primary readable content: tax figures, invoice amounts, form labels, and description text. The pairing achieves approximately 19:1 — well above the 7:1 enhanced target.

Body text on the light scaffold meets the 7:1 enhanced contrast target

  1. Given the light theme body text colour is #000000
  2. And the light scaffold background colour is #F6F6F6
  3. Then the contrast ratio is at least 7:1

Dark Theme — Body Text Contrast

Body text resolves to white (#FFFFFF) via CupertinoColors.label displayed against the dark scaffold (#191919). The same token covers all primary readable content in dark mode. The pairing achieves approximately 18:1 — well above the 7:1 enhanced target.

Body text on the dark scaffold meets the 7:1 enhanced contrast target

  1. Given the dark theme body text colour is #FFFFFF
  2. And the dark scaffold background colour is #191919
  3. Then the contrast ratio is at least 7:1

Light Theme — Brand Primary Colour Contrast

The light brand primary is deep burgundy (#56163E) paired with light cyan (#C2FFFF) as the contrasting button-label colour. The primary is displayed on the white bar background, and the contrasting colour appears as text on the primary. Both pairings achieve above 12:1 — well above the 7:1 enhanced target.

Light theme primary colour on white bar background meets 7:1 contrast

  1. Given the light theme primary colour is #56163E
  2. And the bar background colour is #FFFFFF
  3. Then the contrast ratio is at least 7:1

Light theme contrasting colour on primary background meets 7:1 contrast

  1. Given the light theme primary contrasting colour is #C2FFFF
  2. And the light theme primary background colour is #56163E
  3. Then the contrast ratio is at least 7:1

Dark Theme — Brand Primary Colour Contrast

The dark brand primary is steel blue (#4682B4) displayed on the black bar background (#000000). This achieves approximately 5.1:1 — above the WCAG AA 4.5:1 minimum. The dark theme primaryContrastingColor (#020B14) used as button text on steel blue achieves approximately 4.8:1, also meeting the AA minimum.

Dark theme primary colour on black bar background meets WCAG AA contrast

  1. Given the dark theme primary colour is #4682B4
  2. And the dark bar background colour is #000000
  3. Then the contrast ratio is at least 4.5:1

Dark theme contrasting colour on primary background meets WCAG AA contrast

  1. Given the dark theme primary contrasting colour is #020B14
  2. And the dark primary background colour is #4682B4
  3. Then the contrast ratio is at least 4.5:1

Error Colour Contrast

The error traffic-light token is #CC3232 — used for validation messages and offline error banners. On white it achieves 5.2:1, meeting the WCAG AA 4.5:1 minimum for text. As a non-text status dot it also comfortably exceeds the 3:1 SC 1.4.11 minimum. The 7:1 AAA target for error text is aspirational and is included in the ongoing token audit.

Error colour on white meets the WCAG AA 4.5:1 minimum for text

  1. Given the error colour is #CC3232
  2. And the white background is #FFFFFF
  3. Then the contrast ratio is at least 4.5:1

Error status indicator on white meets the 3:1 non-text contrast minimum

  1. Given the error status colour is #CC3232
  2. And the white background is #FFFFFF
  3. Then the contrast ratio is at least 3:1

Confirmation Colour Contrast

Confirmation states use the deep feature green (#005346) — for example on HMRC submission success screens. On white it achieves 9:1 — exceeding the 7:1 enhanced target. The bright status dot green (#2DC937) used for live-status indicators achieves only 2.2:1 on white and does not meet the SC 1.4.11 3:1 non-text minimum. This is a known gap tracked in the ongoing token audit.

Confirmation colour on white meets the 7:1 enhanced contrast target

  1. Given the confirmation colour is #005346
  2. And the white background is #FFFFFF
  3. Then the contrast ratio is at least 7:1

Light Theme — Feature Card Colour Contrast

Light theme feature card colours (#8D324A red, #005346 green, #5B3E77 purple, surfaces and as card gradient backgrounds where white body text is overlaid. Red, green, and purple exceed 7:1; blue meets the 4.5:1 AA minimum. Gold (#B87F10) and aqua (#00978A) are excluded from this suite; they are partial under SC 1.4.11 and are tracked in the ongoing token audit.

Light red feature colour on white meets the 7:1 enhanced contrast target

  1. Given the light theme red feature colour is #8D324A
  2. And the white background is #FFFFFF
  3. Then the contrast ratio is at least 7:1

Light green feature colour on white meets the 7:1 enhanced contrast target

  1. Given the light theme green feature colour is #005346
  2. And the white background is #FFFFFF
  3. Then the contrast ratio is at least 7:1

Light purple feature colour on white meets the 7:1 enhanced contrast target

  1. Given the light theme purple feature colour is #5B3E77
  2. And the white background is #FFFFFF
  3. Then the contrast ratio is at least 7:1

Light blue feature colour on white meets the WCAG AA 4.5:1 minimum

  1. Given the light theme blue feature colour is #0079B4
  2. And the white background is #FFFFFF
  3. Then the contrast ratio is at least 4.5:1

Dark Theme — Feature Card Colour Contrast

Dark theme feature card colours are used as card gradient backgrounds with white text overlaid. Blue (#004F7C) exceeds the 7:1 enhanced target; red (#A53E44), orange (#9E3F28), aqua (#00787C), and purple (#8C66A9) meet the 4.5:1 AA minimum. Green (#00887B) and gold (#A86F00) are excluded; they are partial under SC 1.4.11 and are tracked in the ongoing token audit.

White text on dark blue feature card meets the 7:1 enhanced contrast target

  1. Given the white text colour is #FFFFFF
  2. And the dark theme blue feature card background is #004F7C
  3. Then the contrast ratio is at least 7:1

White text on dark red feature card meets the WCAG AA 4.5:1 minimum

  1. Given the white text colour is #FFFFFF
  2. And the dark theme red feature card background is #A53E44
  3. Then the contrast ratio is at least 4.5:1

White text on dark orange feature card meets the WCAG AA 4.5:1 minimum

  1. Given the white text colour is #FFFFFF
  2. And the dark theme orange feature card background is #9E3F28
  3. Then the contrast ratio is at least 4.5:1

White text on dark aqua feature card meets the WCAG AA 4.5:1 minimum

  1. Given the white text colour is #FFFFFF
  2. And the dark theme aqua feature card background is #00787C
  3. Then the contrast ratio is at least 4.5:1

White text on dark purple feature card meets the WCAG AA 4.5:1 minimum

  1. Given the white text colour is #FFFFFF
  2. And the dark theme purple feature card background is #8C66A9
  3. Then the contrast ratio is at least 4.5:1