added new visual simulation for colour contrast loss #1351
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✨ Pull Request: Add Support for Color Contrast Loss Simulation
📓 Referenced Issue
This doesn't fix an issue, it showcases a feature which allows you to apply a filter to simulate colour contrast loss. According to the 2021 National Health and Aging Trends Study (NHATS), 10% of US adults aged 71 years and older experience contrast sensitivity impairment, which impacts their ability to distinguish between shades of light and dark.
ℹ️ About the PR
The PR introduces support for a new visual impairment simulation: Color Contrast Loss. This feature reduces the contrast between colors, making it challenging to distinguish text and objects, simulating the experience of individuals with visual impairments related to contrast sensitivity.
The implementation leverages a CSS filter applied to the element, using
grayscale
andcontrast
properties to achieve the desired effect. This addition enhances the app's ability to simulate diverse visual impairments, further aligning it with accessibility needs.Key highlights:
VisionSimulationDropDown
component to include this simulation in the dropdown menu.ColorBlindnessTools
component to handle the application of this effect.🖼️ Testing Scenarios / Screenshots
Testing Steps:
Screenshots: