diff --git a/packages/base-styles/_colors.scss b/packages/base-styles/_colors.scss index e65551e48c783c..bba7fd5c8ec141 100644 --- a/packages/base-styles/_colors.scss +++ b/packages/base-styles/_colors.scss @@ -8,7 +8,7 @@ $black: #000; // Use only when you truly need pure black. For UI, use $gray-900. $gray-900: #1e1e1e; $gray-800: #2f2f2f; -$gray-700: #757575; // Meets 4.6:1 text contrast against white. +$gray-700: #757575; // Meets 4.6:1 (4.5:1 is minimum) text contrast against white. $gray-600: #949494; // Meets 3:1 UI or large text contrast against white. $gray-400: #ccc; $gray-300: #ddd; // Used for most borders. diff --git a/storybook/stories/tokens/color.mdx b/storybook/stories/tokens/color.mdx index 17944a47777fc8..0f99303500ca96 100644 --- a/storybook/stories/tokens/color.mdx +++ b/storybook/stories/tokens/color.mdx @@ -55,7 +55,7 @@ Ensure proper contrast is met between text, icons, UI, and backgrounds. Text nee Against a white background: * **Gray 700**\ -Lightest gray you can use and meet 4.5:1 text contrast. +Meets 4.6:1, lightest gray you can use and meet 4.5:1 text contrast. * **Gray 600**\ Lightest gray you can use and meet 3:1 UI contrast.