Improve FormHelperText contrast (#6346)

* use darker shade of gray for form helper text to meet AAA accessibility constrast guidelines as the 500 variation failed the guidelines * docs: update changelog Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
chakra-ui · Aug 10, 2022 · 2fd5d07 · 2fd5d07 · vercel · Aug 10, 2022
1 parent 70872f2
commit 2fd5d07
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/.changeset/curly-trees-serve.md b/.changeset/curly-trees-serve.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/theme": patch
+---
+
+Improve contrast of FormHelperText to satisfy accessibility check
diff --git a/packages/theme/src/components/form.ts b/packages/theme/src/components/form.ts
@@ -15,7 +15,7 @@ const baseStyleRequiredIndicator: SystemStyleFunction = (props) => {
 const baseStyleHelperText: SystemStyleFunction = (props) => {
   return {
     mt: 2,
-    color: mode("gray.500", "whiteAlpha.600")(props),
+    color: mode("gray.600", "whiteAlpha.600")(props),
     lineHeight: "normal",
     fontSize: "sm",
   }