added new visual simulation for colour contrast loss

[donneypr]

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

[violetadev]

this is such a cool addition, thank you very much!!!

[violetadev]

@all-contributors Please add @donneypr for code

[allcontributors]

@violetadev

@donneypr already contributed before to code