Enhance colour usage guidance (border colour)

[anandamaryon1]

Suggestion from a recent Accessibility Audit.

Add some content into the colour styles guidance to let users know that this border colour is low contrast and shouldn't be used for visual elements that "identify UI" components or "understand content". 

Should also look at other colours and include any below 4.5 for text and 3:1 for graphical elements against the NHS grey background. 

[michaelgallagher]

@anandamaryon1 is this in reference to the light grey border on the card component?

if so, i am wondering: do we know why the outline is there in the first place?

@davidhunter08 may have some of the history here, but if the accessibility guidance is to avoid relying on the outline to "identify UI", part of me is thinking "should there even be an outline on the card?"

[davidhunter08]

if so, i am wondering: do we know why the outline is there in the first place?

The border on the card component was added to help visually retain it's structure on high contrast screens (see feedback) - but I do think it needs revisiting, this work happened back in 2020 when the design system team was disbanded across multiple covid services, so it didn't get the design scrutiny needed IMO.

I asked a related question recently on the x-gov slack about borders on the tag component.

[anandamaryon1]

This was not specifically about the card borders but rather about the use of colours, such as $nhsuk-border-color, and calling out that not all combinations of colours from our styles will pass colour contrast.

The card borders themselves didn't raise an issue in our audit. I think they're OK because the cards contain link text, and the click-ability of the rest of the card is more of an enhancement than the sole signifier of the link.