Fix blockquote color contrasts #1786
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
drammock
reviewed
Apr 25, 2024
gabalafou
commented
Apr 25, 2024
gabalafou
commented
Apr 25, 2024
|
Do I need to update the "Theme variables and CSS" page or any other in the docs? |
gabalafou
added
the
tag: accessibility
Was more of a drive by comment than a review :) |
I don't think so. From that page we link out to the actual CSS file where colors are defined |
trallard
approved these changes
Apr 29, 2024
There was a problem hiding this comment.
Thanks @gabalafou
I'm not entirely sure that we strictly have to meet this contrast threshold
Technically we do not, but having good contrast throughout is something good to aim for.
| @@ -23,6 +23,11 @@ blockquote { | |||
| @include legacy-backdrop-placeholder; | |||
| background-color: var(--pst-color-surface); | |||
|
|
|||
| // Ensure there is enough contrast against the background | |||
| a { | |||
| color: var(--pst-color-inline-code-links); | |||
There was a problem hiding this comment.
Nice I had not realised we had contrast issues here, so thanks for fixing this.
ivanov
pushed a commit
to ivanov/pydata-sphinx-theme
that referenced
this pull request
Jun 5, 2024
* Fix blockquote color contrasts * Increase contrast of blockquote notch in dark mode * Update comment in src/pydata_sphinx_theme/assets/styles/variables/_color.scss * Update comment in src/pydata_sphinx_theme/assets/styles/variables/_color.scss
1 task
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Accessibility fix, see issue #1428
To fix the link contrast contrast violation, I just reused the
--pst-color-inline-code-linksvariable.I also realized that the contrast between the blockquote background (
--pst-color-surface) and the site background color (--pst-color-background) was very low. It would be very hard to increase the contrast between these two colors without creating a cascade of other contrast failures. However, blockquotes also have a left border ("notch"), and so I decided to increase the contrast of the notch with both backgrounds—both the site and the blockquote—so that its ratio with both is above 3.0. To be honest, I'm not entirely sure that we strictly have to meet this contrast threshold in order to satisfy WCAG 1.4.11 Non-text Contrast, but it seemed like a good idea nonetheless so that blockquotes on the site are perceivable by low-vision users.Here are links to the color contrast grids for the blockquote notch:
Screenshots