Color Contrast and Color Independence
Ensure sufficient color contrast ratios and never use color as the sole means of conveying information
When to Use
- Choosing text and background color combinations
- Designing UI states (error, success, warning) that rely on color
- Building data visualizations, charts, or status indicators
- Reviewing designs for WCAG 2.1 AA or AAA compliance
- Supporting users with low vision or color vision deficiency
Instructions
- Meet minimum contrast ratios. WCAG 2.1 AA requires:
- Normal text (under 18pt / 24px, or under 14pt / 18.5px bold): 4.5:1 contrast ratio
- Large text (18pt+ or 14pt+ bold): 3:1 contrast ratio
- Non-text UI components (icons, borders, form controls): 3:1 against adjacent colors
/* 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;
}
- Never use color alone to convey information. Always pair color with a secondary indicator — text, icons, patterns, or underlines.
// 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>
- Test link visibility without relying on color alone. Links within body text should have an underline or other non-color visual distinction. If you remove underlines, ensure a 3:1 contrast ratio between link color and surrounding text color.
/* 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;
}
- Design form validation with multiple cues. Do not rely solely on a red border to indicate errors. Add an error message, an icon, or both.
<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;
}
}
Details
WCAG contrast levels:
- AA (minimum): 4.5:1 for normal text, 3:1 for large text and UI components
- AAA (enhanced): 7:1 for normal text, 4.5:1 for large text
- Target AA for all projects; target AAA for government, healthcare, and financial applications
Contrast ratio formula: Based on relative luminance of the two colors. Use tools to calculate — do not eyeball it.
Recommended tools:
- Browser DevTools: Hover over elements to see contrast ratio in the color picker
- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
- axe DevTools: Flags contrast violations automatically
- Stark (Figma plugin): Check contrast during design
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:
- Placeholder text with insufficient contrast (often fails AA)
- Disabled states that are indistinguishable from enabled states
- Focus indicators that disappear against the background
- Charts using red, green, and yellow without patterns or labels
Source
https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum
Process
- Read the instructions and examples in this document.
- Apply the patterns to your implementation, adapting to your specific context.
- Verify your implementation against the details and edge cases listed above.
Harness Integration
- Type: knowledge — this skill is a reference document, not a procedural workflow.
- No tools or state — consumed as context by other skills and agents.
Success Criteria
- The patterns described in this document are applied correctly in the implementation.
- Edge cases and anti-patterns listed in this document are avoided.
1---2name: a11y-color-contrast3description: Color Contrast and Color Independence4---5# Color Contrast and Color Independence67> Ensure sufficient color contrast ratios and never use color as the sole means of conveying information89## When to Use1011- Choosing text and background color combinations12- Designing UI states (error, success, warning) that rely on color13- Building data visualizations, charts, or status indicators14- Reviewing designs for WCAG 2.1 AA or AAA compliance15- Supporting users with low vision or color vision deficiency1617## Instructions18191. **Meet minimum contrast ratios.** WCAG 2.1 AA requires:20 - **Normal text** (under 18pt / 24px, or under 14pt / 18.5px bold): **4.5:1** contrast ratio21 - **Large text** (18pt+ or 14pt+ bold): **3:1** contrast ratio22 - **Non-text UI components** (icons, borders, form controls): **3:1** against adjacent colors2324```css25/* Good — #1a1a1a on #ffffff = 17.4:1 */26.body-text {27 color: #1a1a1a;28 background: #ffffff;29}3031/* Bad — #999999 on #ffffff = 2.8:1 (fails AA) */32.muted-text {33 color: #999999;34 background: #ffffff;35}3637/* Acceptable for large text — #767676 on #ffffff = 4.5:1 */38.large-heading {39 color: #767676;40 font-size: 24px;41 font-weight: bold;42}43```44452. **Never use color alone to convey information.** Always pair color with a secondary indicator — text, icons, patterns, or underlines.4647```tsx48// Bad — only color distinguishes error from success49<span style={{ color: 'red' }}>Failed</span>50<span style={{ color: 'green' }}>Passed</span>5152// Good — color + icon + text label53<span style={{ color: '#d32f2f' }}>54 <ErrorIcon aria-hidden="true" /> Failed55</span>56<span style={{ color: '#2e7d32' }}>57 <CheckIcon aria-hidden="true" /> Passed58</span>59```60613. **Test link visibility without relying on color alone.** Links within body text should have an underline or other non-color visual distinction. If you remove underlines, ensure a 3:1 contrast ratio between link color and surrounding text color.6263```css64/* Safe — underline present */65a {66 color: #005fcc;67 text-decoration: underline;68}6970/* Also safe — 3:1 contrast between link color and body text color, plus underline on hover/focus */71a {72 color: #005fcc;73 text-decoration: none;74}75a:hover,76a:focus {77 text-decoration: underline;78}79```80814. **Design form validation with multiple cues.** Do not rely solely on a red border to indicate errors. Add an error message, an icon, or both.8283```tsx84<div>85 <label htmlFor="email">Email</label>86 <input87 id="email"88 aria-invalid={!!error}89 aria-describedby={error ? 'email-error' : undefined}90 style={{ borderColor: error ? '#d32f2f' : '#ccc' }}91 />92 {error && (93 <p id="email-error" role="alert" style={{ color: '#d32f2f' }}>94 <ErrorIcon aria-hidden="true" /> {error}95 </p>96 )}97</div>98```991005. **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.1011026. **Check contrast for all interactive states.** Hover, focus, active, disabled, and selected states all need to meet contrast requirements against their backgrounds.1031047. **Test with simulated color vision deficiency.** Chrome DevTools > Rendering > Emulate vision deficiencies. Test with protanopia, deuteranopia, tritanopia, and achromatopsia.1051068. **Design high-contrast mode support.** Windows High Contrast Mode overrides your colors. Use `forced-colors` media query to ensure readability.107108```css109@media (forced-colors: active) {110 .custom-checkbox {111 border: 2px solid ButtonText;112 }113}114```115116## Details117118**WCAG contrast levels:**119120- **AA (minimum):** 4.5:1 for normal text, 3:1 for large text and UI components121- **AAA (enhanced):** 7:1 for normal text, 4.5:1 for large text122- Target AA for all projects; target AAA for government, healthcare, and financial applications123124**Contrast ratio formula:** Based on relative luminance of the two colors. Use tools to calculate — do not eyeball it.125126**Recommended tools:**127128- Browser DevTools: Hover over elements to see contrast ratio in the color picker129- WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/130- axe DevTools: Flags contrast violations automatically131- Stark (Figma plugin): Check contrast during design132133**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.134135**Common mistakes:**136137- Placeholder text with insufficient contrast (often fails AA)138- Disabled states that are indistinguishable from enabled states139- Focus indicators that disappear against the background140- Charts using red, green, and yellow without patterns or labels141142## Source143144https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum145146## Process1471481. Read the instructions and examples in this document.1492. Apply the patterns to your implementation, adapting to your specific context.1503. Verify your implementation against the details and edge cases listed above.151152## Harness Integration153154- **Type:** knowledge — this skill is a reference document, not a procedural workflow.155- **No tools or state** — consumed as context by other skills and agents.156157## Success Criteria158159- The patterns described in this document are applied correctly in the implementation.160- Edge cases and anti-patterns listed in this document are avoided.
Intense-Visions