Problem
In dark mode, secondary grey text is styled using colors like #718096 or #a0aec0 against dark grey backgrounds. This generates a low contrast ratio (often below 3:1), which violates WCAG AA standards requiring a minimum contrast ratio of 4.5:1 for body text.
Expected Behavior
The text color of secondary and helper elements in dark mode should be adjusted to a lighter shade (e.g., #cbd5e0 or custom HSL variables) to guarantee legibility and meet the 4.5:1 ratio constraint.
Target Files
src/app/globals.css (check CSS variables for dark theme values)tailwind.config.js or global variables defined inside src/app/globals-css.ts
Suggested Steps
- Scan the colors mapped for secondary/muted text styles inside the dark mode media query or class selectors.
- Update the color tokens to lighter shades.
- Verify the changes using standard DevTools Contrast checkers.
Problem
In dark mode, secondary grey text is styled using colors like
#718096or#a0aec0against dark grey backgrounds. This generates a low contrast ratio (often below 3:1), which violates WCAG AA standards requiring a minimum contrast ratio of 4.5:1 for body text.Expected Behavior
The text color of secondary and helper elements in dark mode should be adjusted to a lighter shade (e.g.,
#cbd5e0or custom HSL variables) to guarantee legibility and meet the 4.5:1 ratio constraint.Target Files
src/app/globals.css(check CSS variables for dark theme values)tailwind.config.jsor global variables defined insidesrc/app/globals-css.tsSuggested Steps