Add guidance on using turquoise backgrounds

[sanjaypoyzer]

Fixes the problem discussed in issue #200.

[gemmaleigh]

'accessibility standards' is a little vague, could this be revised to "only meets [
WCAG2 Level AA, with a contrast ratio of 3:1 for large text - when the font size is at least 18px, or 14px bold.

[sanjaypoyzer]

@gemmaleigh Not quite sure why the CI failed there...

[gemmaleigh]

I'd like to revise this to:

Make sure text on a coloured background is legible.

To meet WCAG2 Level AA, you need to make sure the:

• font size is at least 18px, or 14px bold
• contrast ratio is 3:1

I've run this past the content designers on the Service Manual team.

@sanjaypoyzer let me know if you're happy to amend and squash those two commits, otherwise I can.

[edwardhorsford]

@gemmaleigh Does that mean that essentially services shouldn't use core-19 in those boxes? (since the font size goes down to 16px on mobile).

[sanjaypoyzer]

Yeah sure, that looks clearer. Will just wait for the clarification on the core-19 point before doing it.

[gemmaleigh]

Yes, the example as-is would fail WCAG2 Level AA for smaller viewports, where .core-19 for body text at 19px decreases to 16px.

If we don't intend to change the colour of the background - then the font size can either be increased, or the 19px white text on a turquoise background could use .bold-19 which would pass.

[sanjaypoyzer]

Should we add that to the guidance as well, or do you think it's clear enough to be inferred?

[gemmaleigh]

This was added in #481, closing as this has now been resolved.