Improve the contrast of the 'current' link colour in the header component

[querkmachine]

Related component

Header, specifically headers with navigation links included.

Context

We've had feedback from a number of working group members that they find the blue 'current' link styling used on the header to be difficult to read, despite surpassing the 4.5:1 contrast ratio expected of text under WCAG 2.2 Level AA, at 5.76:1.

The issues with WCAG's contrast algorithm are well documented, primarily, it is solely based on the brightness difference between the two colours and doesn't account for how human actually perceive brightness in different contexts.

This view is corroborated by the draft version of WCAG 3's contrast algorithm, APCA, which assigns this colour combination a less-than-stellar score of -40.6. For text of this size and weight, we would be aiming for a value of around -75 at a bare minimum. (Roughly acceptable ranges in the APCA docs here.)

Note

APCA scores dark-on-light contrast on a scale of 0 to 105, with higher values being better. Light-on-dark combinations are conversely scored between 0 and -105, with lower values being better.

Unlike the existing WCAG algorithm, APCA takes into account factors like which colour is being used in the background and the specific size and weight of text. The scores here are therefore an estimate.

We should consider using a different tint of GOV.UK link blue for contexts with a dark background, such as the header component, to increase the perceived brightness of this content.