Adjust code colours to have minimum 7:1 contrast

[querkmachine]

Changes the shades of red and green used in code blocks to ensure a minimum 7:1 contrast on a light grey background, satisfying WCAG Level AAA. Resolves #4012.

Changes

• Changes the red and green colours used within inline code and Highlight.js to have a minimum 7:1 contrast ratio with light grey.

Thoughts

• Not sure I like this, personally. Large code blocks look a lot more 'muddy' now, with many colours looking similar enough to black or dark grey that it feels rather ineffective at the actual syntax highlighting aspect.
• We don't guarantee that the Design System website meets Level AAA. The old colours were already compliant with Level AA, so we're under no obligation to change this.
• This change aims to maintain the existing palette with minimal changes and didn't explore more significant changes, such as changing all colours within highlighted code.

[netlify]

✅ You can preview this change here:

Name	Link
🔨 Latest commit	0c5134d
🔍 Latest deploy log	https://app.netlify.com/sites/govuk-design-system-preview/deploys/66c6039062d13b00089a791c
😎 Deploy Preview	https://deploy-preview-4064--govuk-design-system-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[owenatgov]

I agree it looks muddy and starts to defeat the purpose of the syntax highlighting which is a shame.

What do you think about making the offending colours bold instead? This would get around the contrast issue as the text would now count as large scale in WCAG's deffinition. This is what it looks like from playing around on the live site:

To my eye it looks weird now but I don't hate it. What do you think?

[querkmachine]

@owenatgov I agree with it looking kinda funky, kinda overwhelming, not sure I like it that much. Starts rolling into the zone of...

I can imagine it potentially looking weird having all inline code blocks in bold as well.

Think I'll look into alternative themes to see if there's anything we can do with that 🤔

[selfthinker]

I think it would be worth checking these colours against APCA as well. Ideally we'd like to be future-proof and APCA generally gives user-friendlier results than WCAG 2.2 AAA colour checks.

[hazalarpalikli]

.

[hazalarpalikli]

Hi both,

I’ve been giving this some thought:

I’m fully on board with not using bold for the text. It might unintentionally make it seem like we’re placing more emphasis on certain parts, and could even come across as if we're "shouting" at the users. I think it’s best to keep the text unbolded for a more balanced and approachable tone.

I have some concerns around using orange and red together. I left this comment in the slack earlier:

I noticed that we’re using both orange and red in the code text, but the two colours appear quite similar, which makes it hard to distinguish between them. Since they’re meant to convey different information, it might be confusing. Also the fact that i couldn’t even differentiate the two when i first reviewed this.

So instead we can try replacing orange with purple (#4c2c92) ?

[querkmachine]

We've decided that if we were to update code snippets to meet WCAG Level AAA's contrast minimums, we want to solve this problem in a more thorough and reusable way rather than only updating our red and green shades.

That is, we would want to find or create a syntax highlighting palette that:

• is wholly Level AAA contrast compliant
• is usable across both inline code snippets and code blocks
• still has visually distinctive colours for syntax highlighting (in the case of code blocks)
• is visually distinct from surrounding text (in the case of inline code)
• can be rolled out across all forms of documentation we host (Design System, Frontend Docs, Prototype Kit Docs, the Tech Docs gem, etc.)

As our current code snippets and syntax highlighting are already compliant with WCAG Level AA, which is what we're required to meet, we're going to table this work for the time being.