Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added new visual simulation for colour contrast loss #1351

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

donneypr
Copy link
Contributor

@donneypr donneypr commented Jan 1, 2025

✨ 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 and contrast 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:

  • Added a new simulation option: Color Contrast Loss.
  • Updated the VisionSimulationDropDown component to include this simulation in the dropdown menu.
  • Updated the ColorBlindnessTools component to handle the application of this effect.

🖼️ Testing Scenarios / Screenshots

Testing Steps:

  1. Select the "Color Contrast Loss" option from the dropdown in the simulation tools.
  2. Verify that the contrast reduction effect is applied correctly to the page content.
  3. Test toggling between different simulations to ensure seamless transitions.

Screenshots:

image
image

@donneypr donneypr changed the title added new visual stimulation for colour contrast loss added new visual simulation for colour contrast loss Jan 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant