testing-library / testing-library/testing-library-docs

a11y - improve color contrast on the homepage

Open
#1,368 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
479
Forks
740
PR merge metrics
No merged PRs in 30d

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

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Open https://testing-library.com/ in dark mode and inspect the homepage sections named in the report: Who is Using This?, Libraries, Awards, and Open Source Awards. Identify the assets or styles controlling the listed logos, icons, and text, then verify improved contrast in Chrome and Safari for the reported content.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
accessibility, frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.