Skip to content

a11y - improve color contrast on the homepage  #1368

Open
@M0nica

Description

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

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions