/suggest-colors - Suggest Accessible Colors
Suggest alternative colors that meet WCAG contrast requirements.
Steps
- Identify the failing color pairs from the contrast audit
- For each failing pair, determine the target ratio: 4.5:1 (AA normal) or 3:1 (AA large)
- Calculate the minimum adjustment needed to meet the target ratio
- Generate color alternatives by adjusting lightness while preserving hue and saturation
- Provide at least 3 alternative colors for each failing pair
- Verify each suggestion meets the target contrast ratio
- Check that suggested colors fit within the project's design system palette
- Show color swatches (hex codes) with their contrast ratios
- Suggest pairing options: darkening the foreground vs lightening the background
- Verify suggested colors also work for color-blind users (deuteranopia, protanopia)
- Generate a CSS variable override file with the accessible alternatives
- Present before/after comparison showing the visual difference
Rules
- Prefer minimal color changes to maintain the design intent
- Suggest colors that stay within the same hue family
- Provide options for both adjusting foreground and background
- Check suggestions against the full color palette for consistency
- Verify suggestions work for all color blindness types
- Do not suggest pure black/white unless the design already uses them
- Include the exact hex/RGB values for easy implementation