search

pydata / pydata-sphinx-theme

A clean, three-column Sphinx theme with Bootstrap for the PyData community
https://pydata-sphinx-theme.readthedocs.io
BSD 3-Clause "New" or "Revised" License
600 stars 313 forks source link

Fix blockquote color contrasts #1786

Closed gabalafou closed 5 months ago

gabalafou commented 5 months ago

Accessibility fix, see issue #1428

To fix the link contrast contrast violation, I just reused the --pst-color-inline-code-links variable.

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

Before After
blockquote-light-contrast-fail blockquote-light-contrast-pass
blockquote-dark-contrast-fail blockquote-dark-contrast-pass
gabalafou commented 5 months ago

Thanks for your review @drammock! I would like to give @trallard a chance to review this, since she has the best idea of the vision for the overall color scheme. She is at a conference this week, so we probably can't get this PR merged until next week.

gabalafou commented 5 months ago

Do I need to update the "Theme variables and CSS" page or any other in the docs?

drammock commented 5 months ago

Thanks for your review @drammock!

Was more of a drive by comment than a review :)

drammock commented 5 months ago

Do I need to update the "Theme variables and CSS" page or any other in the docs?

I don't think so. From that page we link out to the actual CSS file where colors are defined