Accessibility improvement : section icon has insufficient contrast

[tfrancart]

Accessibility reports have reported an issue on the section symbol having insufficient contrast.

Excerpt and suggested fix:

The section symbol (§) uses the colour #80adce on a background colour white #ffffff. This combination results a contrast ratio of 2.4:1, which fails the WCAG requirement of 4.5:1 for text smaller than 18pt/24px.
The section symbol shares the same colour as its heading (#005a9c) but at 50% opacity, which is why it currently fails WCAG contrast standards.
By slightly increasing the opacity to 80% (colour #337bb0), we can ensure it meets the required 4.6:1 contrast ratio.

[patrickhlauke]

hah, was about to post a new issue about this. see w3c/wcag#5185

the "§" paragraph icon/glyph used for the self-links has insufficient contrast (when it's the light blue version). As it's using opacity: .5 it results in a approximately #7FACCD which, against the white page background, has a contrast ratio of 2.4:1, below the minimum 3:1 (taking this as non-text, as it's a graphical glyph rather than text).

The grey variants at least render to #7F7F7F which has a ratio of 4:1.

In addition, the underline on those links looks awkward and makes them appear "muddy". Arguably it's not needed?

The current styles for this are:

:is(h2,h3,h4,h5,h6):not(#toch2)+a.self-link {
    color: inherit;
    order: -1;
    position: relative;
    left: -1.1em;
    font-size: 1rem;
    opacity: .5;
}

I'd suggest tweaking the opacity to reach at least 3:1 for the light blue paragraph symbols, and possibly adding a text-decoration: none.

[patrickhlauke]

as @kfranqueiro pointed out to me separately, this gets even more extreme in dark mode, where the grey paragraph links that in light mode have sufficient contrast simply disappear.