Added Low contrasted accessibility

Co-authored-by: Justin Baik <bij3377@gmail.com>
Co-authored-by: Max Weisenberger <germanbluemax@gmail.com>
Co-authored-by: Mo Hmaidi <mhmaidi789@gmail.com>
Co-authored-by: Dieu Huynh <dieuhhuynh@gmail.com>

Author: 5 people

src/components/BrowserView/BrowserView.jsx

@@ -15,6 +15,7 @@ const BrowserView = () => {
     checkedMouse: false,
     muted: false,
     checkedGrayscale: false,
+    checkedContrast: false,
   });
 
   // Mute/Unmute webview
@@ -72,6 +73,14 @@ const BrowserView = () => {
         });
         break;
 
+      // Updates contrast
+      case 'checkedContrast':
+        setCheckBox({
+          ...checkedBoxes,
+          checkedContrast: !checkedBoxes.checkedContrast,
+        });
+        break;
+
       default:
         break;
     }
@@ -130,6 +139,18 @@ const BrowserView = () => {
             )}
             label="Grayscale"
           />
+          <FormControlLabel
+            id="contrastCheckbox"
+            control={(
+              <Checkbox
+                value="contrast"
+                checked={checkedBoxes.checkedContrast}
+                onChange={handleChangeCheckBox}
+                name="checkedContrast"
+              />
+            )}
+            label="Low Contrast"
+          />
           <FormControlLabel
             id="Mute Audio Checkbox"
             control={(
@@ -155,7 +176,9 @@ const BrowserView = () => {
         id={styles.browserView}
         src={url}
         style={{
-          filter: checkedBoxes.checkedGrayscale ? 'grayscale(100%)' : 'grayscale(0%)',
+          // filter: checkedBoxes.checkedGrayscale ? 'grayscale(100%)' : 'grayscale(0%)',
+          filter: checkedBoxes.checkedGrayscale && checkedBoxes.checkedContrast ? 'grayscale(100%) contrast(0.2)'
+           : checkedBoxes.checkedGrayscale? 'grayscale(100%)': checkedBoxes.checkedContrast?'contrast(0.2)': null,
           pointerEvents: checkedBoxes.checkedMouse ? 'none' : 'auto',
         }}
       />