Code blocks: Colour contrast issues

[selfthinker]

This issue is from the accessibility audit of the Design System website by DAC in July 2024.

DAC's description

• Page: Password input and Type scale
• WCAG reference: 1.4.6 Contrast (Enhanced) (Level AAA)
• Issue ID: DAC_Colour_Contrast_Text_03 and DAC_Colour_Contrast_Text_04

Red on grey

The colour contrast on the red text against the grey background failed to meet the expected ratio to pass WCAG 2.2 AAA. The expected ratio for colour contrast with text should be at least 7:1, however the colour contrast ratio for text within this element is 4.51:1. This may be problematic for visually impaired users.

Foreground: #D13118 Background: #F3F2F1 Font Size: 16px Ratio: 4.51:1

Current code:

<li>
<a href="/components/password-input/#wcag-autocomplete-attribute">use
<code>autocomplete</code> to securely create and enter passwords</a>
</li>

Green on grey

The colour contrast on the green text against the grey background failed to meet the expected ratio to pass WCAG 2.2 AAA. The expected ratio for colour contrast with text should be at least 7:1, however the colour contrast ratio for text within this element is 5.84:1. This may be problematic for visually impaired users.

Foreground: #00703C Background: #F8F8F8 Font Size: 19px Ratio: 5.84:1

Current code:

<pre><code tabindex="0" class="language-scss"><span class="hljs-
keyword">@include</span> govuk-font(<span class="hljs-variable">$size</span>:
<span class="hljs-number">19</span>);</code></pre>
[…]
<pre><code tabindex="0" class="language-scss"><span class="hljs-
keyword">@include</span> govuk-font(<span class="hljs-variable">$size</span> <span
class="hljs-number">19</span>, <span class="hljs-variable">$weight</span>: bold,
<span class="hljs-variable">$tabular</span>: true);</code></pre>
[…]
<pre><code tabindex="0" class="language-scss"><span class="hljs-
keyword">@include</span> govuk-font-size(<span class="hljs-variable">$size</span>:
<span class="hljs-number">19</span>);</code></pre>
[…]

DAC's proposed solution

For sites to meet AAA, they must comply with WCAG 2.2 checkpoint 1.4.6 for colour contrast. As far as contrast ratio is concerned, it must at least be:

1. if text is not bold and its size is less than 18pt/24px/1.5em/150%: 7:1 for AAA level
2. if text is not bold and its size is at least 18pt/24px/1.5em/150%: 4.5:1 for AAA level
3. if text is bold and its size is less than 14pt/19px/1.2em/118%: 7:1 for AAA level
4. if text is bold and its size is at least 14pt/19px/1.2em/118%: 4.5:1 for AAA level

Thoughts on solution

We could take inspirations from other syntax highlighting projects, like ericwbailey/a11y-syntax-highlighting or mpchadwick/pygments-high-contrast-stylesheets.

Related issues

• The PR in which colours for code highlighting were added was https://github.com/alphagov/govuk-design-system/pull/85
• https://github.com/alphagov/govuk-design-system/issues/4011

Additional instances

This will appear wherever there are code blocks. But they would only need fixing once in the CSS file for code highlighting for all of them.

Needed roles

Designer

[Izabela-16]

@querkmachine from today (16th Oct) stand up, @hazalarpalikli confirmed that this could work, so we are ready to merge it once you are back.

[owenatgov]

Just wanna re-emphesise @selfthinker's comment before we go ahead and merge: https://github.com/alphagov/govuk-design-system/pull/4064#issuecomment-2401809928

[hazalarpalikli]

@Izabela-16 @querkmachine @owenatgov Leaving this comment here as well:

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) ?

[hazalarpalikli]

@Izabela-16 just had a chat with Owen, we are removing this ticket from this cycle as it might need some more thinking.