From 608ed8270d2c5650d6e7c5a44cbb75bdc6a0795c Mon Sep 17 00:00:00 2001 From: Nisha Yerunkar Date: Fri, 1 Dec 2023 16:24:51 -0800 Subject: [PATCH] Update Icon a11y docs to specify 3:1 contrast ratio --- .changeset/slow-pigs-sip.md | 2 ++ __docs__/wonder-blocks-icon/accessibility.stories.mdx | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 .changeset/slow-pigs-sip.md diff --git a/.changeset/slow-pigs-sip.md b/.changeset/slow-pigs-sip.md new file mode 100644 index 000000000..a845151cc --- /dev/null +++ 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 index 870fae59c..e28a8d89a 100644 --- 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)