fix: a11y low contrast in dark mode for code [AC-4348]

[Stefan3002]

Done

• Increased the contrast for the code element in dark mode.
• Screenshots show it was too low.
• The contrast is 5.13 now.

QA

• Open demo
• [Add QA steps]
• Review updated documentation:
  • [List any updated documentation for review]
    Look at a confirmation modal that says: Next time press SHIFT, the contrast of the SHIFT text should be increased and pass a11y guidelines

Check if PR is ready for release

If this PR contains Vanilla SCSS or macro code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention
  • if existing APIs (CSS classes & macro APIs) are not changed it can be a bugfix release (x.x.X)
  • if existing APIs (CSS classes & macro APIs) are changed/added/removed it should be a minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) or macros should be listed on the what's new page.

Fixes: AC-4348

Screenshots

[webteam-app]

Demo

Jenkins

demos.haus

[jmuzina]

While indeed the code text now has greater contrast against its own background, this also decreases the contrast between code and non-code text - it seems quite a bit harder to distinguish them.

Before

After

@juanruitina does this new background color look OK to you?

[juanruitina]

It is more important to be able to read the text than to tell the semantics apart (and in this case, semantics are even reinforced by the monospace font). The contrast lower than 4.5 is not acceptable.

That said, @Stefan3002 it seems the case you are sharing in your screenshot is a corner case caused by the use of muted text. rgba($color-x-light, 0.15) would be sufficient to make the contrast greater than 4.5, see below. We could apply this to code tags only inside muted text, or for all code for the sake of simplicity and increased text contrast in all cases. Both options would be compliant.

Interestingly, this is not an issue in the light theme: