A11y: Use PyData Theme's Sphinx Design Components to fix dark mode contrast #61
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
In light mode, the card titles at https://www.pyopensci.org/python-package-guide/ has dark grey text on a light grey background:
The contrast is good, meeting both of WCAG's AA and AAA accessibility guidelines:
However, in dark mode, we get a light grey text on a light grey background, making it hard to read:
It has very low contrast, meeting neither level:
In both cases, we're using Bootstrap's
bg-light
class for the background.One fix would be to use a darker background in dark mode.
But the cards at https://pydata-sphinx-theme.readthedocs.io/en/latest/user_guide/web-components.html#cards don't have any special background colour for the panel titles, so shall we follow suit?
If so, we get this:
And: