Merge pull request #45 from simin4950/contrast

Adding prefers-contrast: less to css accessibility snippets
intuit · Oct 1, 2021 · e53a333 · e53a333
2 parents 3254753 + 03e0479
commit e53a333
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -14,6 +14,8 @@
 ### CSS snippet
 
 - reduced motion - adds a reduced motion snippet with prefix `transition`
+🚨 Safari Only Queries  🚨 
+- less-contrast - adds less contrast media snippet with prefix `less-contrast`
 
 - dark-color-scheme - adds dark prefers-color-scheme snippet with prefix `darkColorScheme`
 

diff --git a/snippets/css-snippets.code-snippets b/snippets/css-snippets.code-snippets
@@ -1,15 +1,31 @@
 {
-  "transition": {
-    "prefix": ["transition"],
-    "body": [
-      "transition: \t$1",
-      "",
-      "@media screen and (prefers-reduced-motion) {",
-      "transition: \t$0",
-      "}"
-    ],
-    "description": "Adds reduced motion media query anytime transition is added to css file"
-  },
+    "transition": {
+        "prefix": [
+            "transition",
+        ],
+        "body": [
+            "transition: \t$1",
+            "",
+            "@media screen and (prefers-reduced-motion) {",
+            "transition: \t$0",
+            "}"
+        ],
+        "description": "Adds reduced motion media query anytime transition is added to css file"
+    },
+
+    "contrast": {
+        "prefix": [
+            "less-contrast",
+        ],
+        "body": [
+            "@media (prefers-contrast: less) {", 
+            "\t$0",
+            "}"
+
+        ],
+        "description": "Detects if user has requested that the web content is presented with less constrast. Note that this is only supported on Safari."
+    },
+
   "darkColorScheme": {
     "prefix": ["darkColorScheme"],
     "body": [
@@ -20,4 +36,4 @@
     ],
     "description": "Adds dark color scheme media query whenever user indicates dark theme in the operating system settings"
   }
-}
+}