Help us improve
Share bugs, ideas, or general feedback.
From grimoire
Ensures text and UI components meet WCAG contrast ratios (AA/AAA) and avoids color-only information conveyance.
npx claudepluginhub jeffreytse/grimoire --plugin grimoireHow this skill is triggered — by the user, by Claude, or both
Slash command
/grimoire:apply-accessible-colorThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Ensure all text and UI components meet WCAG contrast ratios and that no information is conveyed by color alone.
Ensures WCAG 2.1 AA contrast ratios and adds non-color indicators (icons, patterns, labels) for accessibility. Use when choosing color combos, designing UI states, or building data visualizations.
Expert approach to color-contrast-analysis in accessibility testing. Use when working with .
Validates WCAG 2.1 contrast ratios and generates accessible color pairings. Use when checking accessibility compliance, fixing contrast issues, or selecting text/background combinations for AA or AAA levels.
Share bugs, ideas, or general feedback.
Ensure all text and UI components meet WCAG contrast ratios and that no information is conveyed by color alone.
Adopted by: WCAG 2.1 SC 1.4.3 (Level AA) is required by Section 508, EU EN 301 549, UK PSBAR 2018, and all major platform guidelines (Apple HIG, Material Design, Microsoft Fluent). WebAIM Million 2024 found low contrast text is the #1 WCAG failure on 81% of top homepages — the single most widespread accessibility violation on the web. Impact: 8% of men and 0.5% of women have color vision deficiency (CVD); low contrast affects all users in bright sunlight or on low-quality screens. Google's Material Design team documented that meeting AA contrast ratios improved readability scores across all user groups, not just users with disabilities. Why best: Color-only information (red = error, green = success) is invisible to colorblind users and screen reader users. Contrast ratios are mathematically verifiable — the only objective, testable way to ensure text is readable across disability types and display conditions.
Sources: W3C WCAG 2.1 SC 1.4.1, 1.4.3, 1.4.11 (2018); WebAIM Million 2024; Colour Blind Awareness (colourblindawareness.org)
| Text type | Minimum ratio (AA) | Enhanced ratio (AAA) |
|---|---|---|
| Normal text (< 18pt / < 14pt bold) | 4.5:1 | 7:1 |
| Large text (≥ 18pt OR ≥ 14pt bold) | 3:1 | 4.5:1 |
| UI components, icons, focus indicators | 3:1 | — |
| Decorative text (no information) | none | — |
| Disabled controls | none | — |
Check ratios with: WebAIM Contrast Checker, Figma Contrast plugin, or browser DevTools Accessibility panel.
/* Wrong — visually looks fine at full opacity, fails at 60% */
.helper-text {
color: rgba(0, 0, 0, 0.6); /* #666 on white = 5.74:1 ✅ but context-dependent */
}
/* Right — use design tokens that encode the verified contrast pair */
.helper-text {
color: var(--color-text-secondary); /* token defined as #595959 on #fff = 7.0:1 ✅ */
}
Test every color/background-color combination where text appears — including:
hover states, focus states, disabled states (exempt), placeholder text (not exempt).
<!-- Wrong — only color distinguishes error from success -->
<p style="color: red">Your password is too short</p>
<p style="color: green">Password saved successfully</p>
<!-- Right — pair color with text label and icon -->
<p class="error">
<span aria-hidden="true">✗</span>
<strong>Error:</strong> Your password is too short
</p>
<p class="success">
<span aria-hidden="true">✓</span>
<strong>Success:</strong> Password saved
</p>
Same principle applies to: charts and graphs (add patterns or direct labels), form validation (add icons + text), link identification (add underline, not just color), required field marking (add asterisk + legend, not just red color).
WCAG 2.1 SC 1.4.11 (AA) requires 3:1 contrast for:
/* Wrong — light gray border on white background = 1.6:1 */
input { border: 1px solid #ccc; }
/* Right — 3:1 minimum */
input { border: 1px solid #767676; } /* #767676 on #fff = 4.54:1 ✅ */
Use browser extensions (Colorblindly, Stark) or Figma's Color Blind plugin to simulate:
If the interface relies on color to distinguish items (e.g., chart lines), add patterns, shapes, or direct labels that work in grayscale.
Testing with mockup colors, not rendered colors. Transparency, overlays, and CSS gradients change the effective contrast. Always measure the computed color in the browser DevTools.
Passing contrast for default state but failing for hover/focus. Every interactive state must independently meet the ratio. A button with passing text contrast but a low-contrast hover state fails SC 1.4.3.
Exempting text over images. Text rendered over a background image has no guaranteed contrast. Either avoid text over images, use a scrim/overlay with sufficient contrast, or use a solid text block.