testing-library/testing-library-docs

a11y - improve color contrast on the homepage

M0nica opened this issue · 3 comments

Describe the bug Low color contrast on the (dark mode) homepage in several places which makes it difficult to read the information,
To Reproduce Steps to reproduce the behavior:

  1. Go to https://testing-library.com/ (with dark mode enableD)
  2. Scroll down to 'Who is Using This?, Libbraries, Awards
  3. See low contrast on some of the icons and text

Expected behavior Expect to see higher level of contrast for AutoDesk, Facebook Open Source, Walmart Labs, React Native (logo) etc. and "The Most Impactful Contribution to the Community" under Open Source Awards.
Screenshots If applicable, add screenshots to help explain your problem.
Screenshot 2024-02-15 at 11 55 43 AM
Screenshot 2024-02-15 at 11 55 52 AM
Screenshot 2024-02-15 at 11 56 02 AM

Desktop (please complete the following information):

  • OS: [e.g. iOS] - MacOS
  • Browser [e.g. chrome, safari] - Chrome and Safari

Additional context

This could be resolved by using the <picture> element with a srcset and changing the image file based on a users current color scheme as outlined in this article: https://larsmagnus.co/blog/how-to-make-images-react-to-light-and-dark-mode

Thanks for opening this issue.
Would this be something that you want to create a pull request for @M0nica ?

Thanks @M0nica!
This is actually a regression I created back then because I didn't have the time to find dark mode logos for some of our users.
The code is ready for this, all needed to do is to contribute a darkImage for the missing ones:
https://github.com/testing-library/testing-library-docs/blob/main/docusaurus.config.js#L22

We would love a PR for this :)

denisx commented

For examle, we can solve the problem with css filter: invert(100%);

We can have qiuck fix (and waiting for images more)
1.
Screenshot 2024-05-14 at 22 11 46

Screenshot 2024-05-14 at 22 11 52
Screenshot 2024-05-14 at 22 11 19 Screenshot 2024-05-14 at 22 11 28
Screenshot 2024-05-14 at 22 12 24 Screenshot 2024-05-14 at 22 12 34