Update Icon a11y docs to specify 3:1 contrast ratio

Khan · Dec 2, 2023 · 608ed82 · 608ed82
1 parent 9092363
commit 608ed82
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/.changeset/slow-pigs-sip.md b/.changeset/slow-pigs-sip.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/__docs__/wonder-blocks-icon/accessibility.stories.mdx b/__docs__/wonder-blocks-icon/accessibility.stories.mdx
@@ -31,7 +31,7 @@ import {IconMappings} from "./phosphor-icon.argtypes";
 -   Each icon should convey a single meaning.
 -   Icons should be easy to see.
 -   The color contrast should pass WCAG.
-    -   At least 4.5:1 contrast ratio for icons.
+    -   At least 3:1 contrast ratio for icons.
 -   Ideally, an icon should be accompanied by text. However, if an icon
     is not accompanied by text, provide alt text.
     -   Do not provide alt text for decorative icons. Set the alt text
@@ -96,3 +96,4 @@ More information about all these points can be found in the
 -   [Bidirectionality - Material](https://m2.material.io/design/usability/bidirectionality.html)
 -   [Accessible Icons: How to Make Them for Your Website](https://blog.hubspot.com/website/accessible-icons)
 -   [HTML5 Accessibility Chops: title attribute use and abuse](https://www.tpgi.com/html5-accessibility-chops-title-attribute-use-and-abuse/)
+-   [Non-text Contrast (Level AA) - W3](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html)