a11y - improve color contrast on the homepage

[M0nica]

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.

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

[timdeschryver]

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

[MatanBobi]

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]

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

We can have qiuck fix (and waiting for images more) 1.

2.

3.