microsoft / microsoft/react-native-gallery

Bug 54060766: [React Native Gallery -> Touchable Without Feedback]: Color contrast ratio for 'TouchableWithoutFeedback' text present under “A colored TouchableWithoutFeedback” heading is 4.42:1 which is less than minimum requirement of 4.5:1.

Open
#508 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

A11ySev3 Area: Accessibility Area: Paper bug
Dominant language
TypeScript
Stars
257
Forks
57
Avg merge
18h 19m
Merged PRs (30d)
10

Description

Build Details:
OS Version: Dev (OS Build 27695.1000)
App: React Native Gallery
App Version: 1.0.18.0
React Native Windows Version: 0.75.0
AT: Color Contrast

Repro-Steps:
Launch the React Native Gallery app.
Navigate to ‘All samples’ button present in left navigation pane and invoke it.
Navigate to ‘Touchable Without Feedback’ button present under “Legacy” group and invoke it.
Now check color contrast for “TouchableWithoutFeedback” text present under “A colored TouchableWithoutFeedback” heading.
Actual Result:
Color contrast ratio for 'TouchableWithoutFeedback' text present under “A colored TouchableWithoutFeedback” heading is 4.42:1 which is less than minimum requirement of 4.5:1.

Expected Result:
Color contrast ratio for ‘TouchableWithoutFeedback’ present under “A colored TouchableWithoutFeedback” heading must be greater than or equal to 4.5:1 ratio.

User Impact:
People with low vision are not able to consume the text which is having low contrast ratio.

Link to ADO bug: https://microsoft.visualstudio.com/OS/_workitems/edit/54060766

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

Follow the reproduction steps in the React Native Gallery app to reach the Touchable Without Feedback sample and locate the “TouchableWithoutFeedback” text under “A colored TouchableWithoutFeedback.” Identify the sample source and adjust the relevant color so the measured contrast ratio is at least 4.5:1, then verify the result with the color-contrast check.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native, typescript
Domain
accessibility, mobile
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.