From harness-claude
Ensures WCAG 2.1 AA/AAA color contrast ratios and pairs color with icons, text, or patterns for UI states, links, forms, and data visualizations.
npx claudepluginhub intense-visions/harness-engineering --plugin harness-claudeThis skill uses the workspace's default tool permissions.
> Ensure sufficient color contrast ratios and never use color as the sole means of conveying information
Designs accessible color palettes with WCAG contrast ratios, color blindness simulation, and best practices for UI elements, charts, visualizations, and design systems.
> Color independence — conveying information without relying on color alone, building colorblind-safe palettes, and ensuring perceptual uniformity across all vision types
Validates color contrast ratios for accessibility in CSS, React, and Vue projects. Generates WCAG-compliant schemes, code, and best practices guidance when triggered by color contrast queries.
Share bugs, ideas, or general feedback.
Ensure sufficient color contrast ratios and never use color as the sole means of conveying information
/* Good — #1a1a1a on #ffffff = 17.4:1 */
.body-text {
color: #1a1a1a;
background: #ffffff;
}
/* Bad — #999999 on #ffffff = 2.8:1 (fails AA) */
.muted-text {
color: #999999;
background: #ffffff;
}
/* Acceptable for large text — #767676 on #ffffff = 4.5:1 */
.large-heading {
color: #767676;
font-size: 24px;
font-weight: bold;
}
// Bad — only color distinguishes error from success
<span style={{ color: 'red' }}>Failed</span>
<span style={{ color: 'green' }}>Passed</span>
// Good — color + icon + text label
<span style={{ color: '#d32f2f' }}>
<ErrorIcon aria-hidden="true" /> Failed
</span>
<span style={{ color: '#2e7d32' }}>
<CheckIcon aria-hidden="true" /> Passed
</span>
/* Safe — underline present */
a {
color: #005fcc;
text-decoration: underline;
}
/* Also safe — 3:1 contrast between link color and body text color, plus underline on hover/focus */
a {
color: #005fcc;
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}
<div>
<label htmlFor="email">Email</label>
<input
id="email"
aria-invalid={!!error}
aria-describedby={error ? 'email-error' : undefined}
style={{ borderColor: error ? '#d32f2f' : '#ccc' }}
/>
{error && (
<p id="email-error" role="alert" style={{ color: '#d32f2f' }}>
<ErrorIcon aria-hidden="true" /> {error}
</p>
)}
</div>
Use patterns, shapes, or labels in data visualizations. Charts with color-coded series are unreadable for color-blind users. Add patterns, direct labels, or shape markers.
Check contrast for all interactive states. Hover, focus, active, disabled, and selected states all need to meet contrast requirements against their backgrounds.
Test with simulated color vision deficiency. Chrome DevTools > Rendering > Emulate vision deficiencies. Test with protanopia, deuteranopia, tritanopia, and achromatopsia.
Design high-contrast mode support. Windows High Contrast Mode overrides your colors. Use forced-colors media query to ensure readability.
@media (forced-colors: active) {
.custom-checkbox {
border: 2px solid ButtonText;
}
}
WCAG contrast levels:
Contrast ratio formula: Based on relative luminance of the two colors. Use tools to calculate — do not eyeball it.
Recommended tools:
Color-blind-safe palettes: Approximately 8% of males and 0.5% of females have color vision deficiency. Red-green is the most common. Avoid red/green as the only distinction. Blue/orange is generally safe across all types.
Common mistakes:
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum