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.