A11y: adjust colour contrast for dark theme

[hugovk]

Context

No response

Bug description

With the dark theme, pages such as:

• https://squidfunk.github.io/mkdocs-material/getting-started/
• https://blog.pypi.org/

don't have enough contrast for the links, making them hard to read and affecting accessibility.

The ratio doesn't meet the WCAG guidelines.

Related links

• Improve Accessibility #4006 - mentions "too low contrasts for example for the header links"
• [Accessibility] Improve contrast of links with light primary colors #1640 - says "I’m currently working on dark mode in WIP – Dark mode #1639, which will also include a dedicated variable for link colors as proposed in Add option for separate link colours #1583."

Reproduction

example.zip

Steps to reproduce

1. Open site in dark mode
2. Inspect page in Chrome, select Lighthouse tab
3. Select Accessibility category (can uncheck others to speed it up)
4. Click "Analyze page load"
5. Check results

Expected results:

Score: 100 and no contrast issues

Actual results:

Several contrast issues found:

Details

In my view, the top priority would be to fix the colour used for links (var(--md-typeset-a-color)) which especially problematic for pages like https://blog.pypi.org/

Suggestion:

Inspect the problematic text using Chrome:

Details

Click the colour square in the styles pane and expand the bit next to Contrast ratio:

Details

Click the box next to AA 4.5 to get a suggested colour:

Details

This gives #7299e1 which is a good replacement for the problematic #6c91d5.

Note: make sure not to change colours for light mode at the same time, or it may make the contrast worse for light mode.

Browser

Chrome

Before submitting

• I have read and followed the bug reporting guidelines.
• I have attached links to the documentation, and possibly related issues and discussions.
• I assure that I have removed all customizations before submitting this bug report.
• I have attached a .zip file with a minimal reproduction.

[squidfunk]

Thanks for reporting. I agree that we can improve link colors in the theme-provided colors.

However, for PyPI, the story is different. It seems that they customized the theme, and changed the primary color to their CI colors, but didn't adjust some other colors to fit dark mode.

Thus, I would recommend to raise this problem to the maintainers of the PyPI blog.

[hugovk]

Aha, thanks for pointing that out, I've opened pypi/warehouse#13972 to fix the main PyPI contrast problem.

[squidfunk]

Thanks again for the report and the directions to fix the issue. Applied your suggested changes in a4babcf. They will be released with 9.2.0b3 and subsequently the stable release.

[hugovk]

Thank you!

[squidfunk]

Released as part of 9.2.0b3.