Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

a11y - improve color contrast on the homepage #1368

Open
M0nica opened this issue Feb 15, 2024 · 3 comments
Open

a11y - improve color contrast on the homepage #1368

M0nica opened this issue Feb 15, 2024 · 3 comments

Comments

@M0nica
Copy link

M0nica commented Feb 15, 2024

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

@timdeschryver
Copy link
Member

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

@MatanBobi
Copy link
Member

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
Copy link

denisx commented May 14, 2024

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

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

No branches or pull requests

4 participants