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:
- Go to https://testing-library.com/ (with dark mode enableD)
- Scroll down to 'Who is Using This?, Libbraries, Awards
- 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.



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 :)





