Improve accessibility on the theme

I checked that…

• … the documentation does not mention anything about my problem
• … the problem doesn’t occur with the default MkDocs template
• … the problem is not in any of my customizations (CSS, JS, template)
• … there are no open or closed issues that are related to my problem

Description

It probably depends on the palette accent/primary color used, but we have this kind of accessibility issue at least with the red and blue variation.

I was running a Lighthouse check on our website and realize this accessibility issue:

Background and foreground colors do not have a sufficient contrast ratio.

This is valid for the title and links in the header, the links in the main content and the links in the footer.

Expected behavior

Lighhouse do not report any contrast issue.

Actual behavior

Lighhouse reports some contrast issues with various elements of the page.

Steps to reproduce the bug

1. Open a website using mkdown material on Chrome
2. Click on the Lighthouse tab and click on generate report
3. Check the issues related to Accessibility

[squidfunk]

Sure! It will be merged back into master as soon as the funding goal is hit 😊 You’ll have immediate access if you become a sponsor of this project, which starts at $10/m. If you don’t want to become a sponsor, note that you can already also tweak colors and color schemes easily with some CSS.

[squidfunk]

I investigated this issue and found the following issues with the original theme on the “Getting started” page:

• Active tab labels (the blue used for the first tab titling “Material for MkDocs”). The tab label color is entirely configurable through the accent color configuration, and also customizable via 3-4 lines of extra CSS. While I agree that we should try to meet AA standards, the tab label color has a contrast ratio of 4.24 which is almost 4.5 which would pass the test, meaning we’re not far off. We would need to deviate from Google’s official Material color palette, which I would rather not do, as this will be an entire rabbit hole I don’t have the time to go down.

• The non-link footer text, i.e. the “Made with”. I agree that this color is more off, but the problem here lies in the way links are styled in the footer. The accent color is not used on hover, to better separate the footer from the rest of the content. Also, darker accent colors will not work with the footer, thus we can only transpose the problem. For this reason we need three shades of grey: white is the hovered state, grey the unhovered state of a link, and a dark grey is the normal text color. To change the color, you can use the following extra CSS:

.md-footer-copyright {
  color: white;
}

I hope you understand this decision. While we try to make this theme as accessible as possible, some things have to be compromises, because of the many ways this theme can be configured. In the end, it’s a combinatorial problem.