Skip to content

Conversation

hugovk
Copy link
Contributor

@hugovk hugovk commented Mar 22, 2023

In light mode, the card titles at https://www.pyopensci.org/python-package-guide/ has dark grey text on a light grey background:

image

The contrast is good, meeting both of WCAG's AA and AAA accessibility guidelines:

image

However, in dark mode, we get a light grey text on a light grey background, making it hard to read:

image

It has very low contrast, meeting neither level:

image

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?

image

image

If so, we get this:

image

And:

image

@lwasser
Copy link
Member

lwasser commented Mar 22, 2023

hey @hugovk !! 👋 welcome to pyOpenSci!! MANY thanks for this pr. it's much more readable and accessible without that class so let's merge this.

@lwasser
Copy link
Member

lwasser commented Mar 22, 2023

@all-contributors please add @hugovk for code, review

@allcontributors
Copy link
Contributor

@lwasser

I've put up a pull request to add @hugovk! 🎉

@lwasser lwasser merged commit 1e50431 into pyOpenSci:main Mar 22, 2023
@lwasser
Copy link
Member

lwasser commented Mar 22, 2023

may i ask - what tool are you using to evaluate contrast ratio in the screenshots above?

@hugovk hugovk deleted the fix-contrast branch March 23, 2023 06:45
@hugovk
Copy link
Contributor Author

hugovk commented Mar 23, 2023

I used Chrome's devtools.

For example, right click an element and select Inspect. Then find the relevant bit of text in the HTML and find the color:

image

Click the little coloured square to open the colour picker:

image

And the down arrow:

image

Here all is now good.

Assuming it wasn't, you can use the colour picker to try different colours and it updates the page and contrast results:

image

You can also click the little circular arrow next to "AA 4.5" and "AAA 7.0" to get suggested colours. AA:

image

And AAA:

image

That was a bit of an artificial example. I also suggest checking AAA, but sometimes the suggested colour is a bit too far from the original.

@NickleDave
Copy link
Contributor

Good to know, thanks so much @hugovk. We definitely want the site to be accessible in every way.

@hugovk
Copy link
Contributor Author

hugovk commented Mar 24, 2023

Another tip is to run the accessibility audit in Google's Lighthouse either from Chrome's devtools (which allows testing both light and dark mode) or online at https://pagespeed.web.dev/, for example: https://pagespeed.web.dev/analysis/https-www-pyopensci-org-python-package-guide/1r3w5g4oc7?form_factor=mobile

That highlights another contrast issue for teal with white, plus missing link name for the GitHub badge.

@lwasser
Copy link
Member

lwasser commented Mar 27, 2023 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants