Merge pull request #1351 from donneypr/colour_contrast_loss

added new visual simulation for colour contrast loss
responsively-org · Jan 16, 2025 · 6464975 · 6464975
2 parents 62eb106 + f5b1fbd
commit 6464975
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 0 deletions.
diff --git a/desktop-app/src/common/deviceList.ts b/desktop-app/src/common/deviceList.ts
@@ -298,6 +298,45 @@ export const defaultDevices: Device[] = [
     isTouchCapable: true,
     isMobileCapable: true,
   },
+  {
+    id: '10022',
+    name: 'iPhone 16',
+    width: 393,
+    height: 852,
+    dpr: 3,
+    capabilities: ['touch', 'mobile'],
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+    type: 'phone',
+    isTouchCapable: true,
+    isMobileCapable: true,
+  },
+  {
+    id: '10023',
+    name: 'iPhone 16 Plus',
+    width: 430,
+    height: 932,
+    dpr: 3,
+    capabilities: ['touch', 'mobile'],
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1',
+    type: 'phone',
+    isTouchCapable: true,
+    isMobileCapable: true,
+  },
+  {
+    id: '10024',
+    name: 'iPhone 16 Pro',
+    width: 393,
+    height: 852,
+    dpr: 3,
+    capabilities: ['touch', 'mobile'],
+    userAgent:
+      'Mozilla/5.0 (iPhone; CPU iPhone OS 18_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Mobile/15E148 Safari/604.1',
+    type: 'phone',
+    isTouchCapable: true,
+    isMobileCapable: true,
+  },
   {
     id: '20001',
     name: 'Nexus 4',

diff --git a/desktop-app/src/renderer/components/Previewer/Device/ColorBlindnessTools/index.tsx b/desktop-app/src/renderer/components/Previewer/Device/ColorBlindnessTools/index.tsx
@@ -159,6 +159,7 @@ export const ColorBlindnessTools = ({ webview }: Props) => {
   top: -75vmax;
 }`,
         [SIMULATIONS.FAR]: `body { filter: blur(2px); }`,
+        [SIMULATIONS.COLOR_CONTRAST_LOSS]: `body { filter: grayscale(0.5) contrast(0.8); }`,
       };
       const css = impairments[visualImpairment.toLowerCase()];
       let js = null;

diff --git a/desktop-app/src/renderer/components/VisionSimulationDropDown/index.tsx b/desktop-app/src/renderer/components/VisionSimulationDropDown/index.tsx
@@ -54,6 +54,7 @@ export const SIMULATIONS = {
   FAR: 'farsightedness',
   GLAUCOME: 'glaucoma',
   SOLARIZE: 'solarize',
+  COLOR_CONTRAST_LOSS: 'color-contrast-loss',
 };
 
 export const RED_GREEN = [
@@ -68,6 +69,7 @@ export const VISUAL_IMPAIRMENTS = [
   SIMULATIONS.CATARACT,
   SIMULATIONS.FAR,
   SIMULATIONS.GLAUCOME,
+  SIMULATIONS.COLOR_CONTRAST_LOSS,
 ];
 export const SUNLIGHT = [SIMULATIONS.SOLARIZE];