Links on grey have low colour contrast

[jon-kirwan]

What

Page: https://www.gov.uk/government/publications/blue-badge-can-i-get-one

In the “Applies to England“ section, the blue (#1d70b8) links have a low colour contrast against the grey (#f3f2f1) background with a ratio of 4.6:1. Users with low vision may find reading this text difficult.

WCAG reference: 1.4.6 Contrast (Enhanced) (Level AAA)

Issue ID: DAC_Contrast_Enhanced_03

Related issues

https://trello.com/c/510kw849/110-investigate-links-on-grey

See https://trello.com/c/T1yWkXw0/57-links-on-grey-have-low-colour-contrast

[jon-kirwan]

An option here is to hold off any changes until 5.2 (with new typography scale) is merged.

Then if we make the links bold, we should meet the AAA requirement.

Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
See https://webaim.org/resources/contrastchecker/?fcolor=1D70B8&bcolor=F3F2F1

Mobile

Tablet >

[jon-kirwan]

Other components:

• https://components.publishing.service.gov.uk/component-guide/intervention#with_suggestion_link
• https://components.publishing.service.gov.uk/component-guide/signup_link#with_background_and_border
• https://components.publishing.service.gov.uk/component-guide/govspeak#call_to_action
• https://components.publishing.service.gov.uk/component-guide/govspeak#advisory (with high-alert)