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.
Nobody has claimed this yet.
- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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