Color Contrast
Test color contrast ratios
WCAG 1.4.3 - Contrast Minimum (Level AA)
Normal text: 4.5:1 ratio. Large text (18pt+ or 14pt+ bold): 3:1 ratio. WCAG 1.4.6 (Level AAA) requires 7:1 for normal text.
Mode:
Contrast Examples
Text and buttons
Text on White Background
Regular body text (#D1D5DB - 1.6:1 ❌)
Secondary text (#9CA3AF - 2.7:1 ❌)
Link text (#93C5FD - 2.3:1 ❌)Interactive Elements
💡 Note: Disabled elements are exempt from contrast requirements, but consider using other visual cues (opacity, icons).
Contrast Checker
Test your colors
Sample Text Preview
The quick brown fox jumps over the lazy dog
5.74:1
Contrast Ratio
AA (4.5:1)
Normal text
AAA (7:1)
Enhanced
WCAG Contrast Requirements
Level AA and AAA
Level AA (Minimum)
- • Normal text: 4.5:1
- • Large text (18pt+): 3:1
- • UI components: 3:1
- • Focus indicators: 3:1
Level AAA (Enhanced)
- • Normal text: 7:1
- • Large text (18pt+): 4.5:1
- • Recommended for:
- - Low vision users
- - Bright environments
Exceptions
- • Disabled elements
- • Decorative text
- • Logos/brand names
- • Incidental text in images
Automation Tips
Testing hints
Playwright + axe-core
import AxeBuilder from '@axe-core/playwright';
// Check all color contrast violations
const results = await new AxeBuilder({ page })
.withRules(['color-contrast'])
.analyze();
for (const violation of results.violations) {
console.log('Contrast issues:');
for (const node of violation.nodes) {
console.log({
element: node.target,
issue: node.failureSummary
});
}
}
// Verify specific element contrast
const button = page.getByTestId('button-example');
const styles = await button.evaluate(el => ({
color: getComputedStyle(el).color,
bg: getComputedStyle(el).backgroundColor
}));Contrast Calculation
// Calculate contrast ratio programmatically
function getContrastRatio(fg: string, bg: string) {
const luminance = (hex: string) => {
const rgb = parseInt(hex.slice(1), 16);
const r = ((rgb >> 16) & 0xff) / 255;
const g = ((rgb >> 8) & 0xff) / 255;
const b = (rgb & 0xff) / 255;
const linear = (c: number) =>
c <= 0.03928
? c / 12.92
: Math.pow((c + 0.055) / 1.055, 2.4);
return 0.2126 * linear(r)
+ 0.7152 * linear(g)
+ 0.0722 * linear(b);
};
const l1 = luminance(fg);
const l2 = luminance(bg);
const lighter = Math.max(l1, l2);
const darker = Math.min(l1, l2);
return (lighter + 0.05) / (darker + 0.05);
}Testing Tips
Automation hints
- ✓ Use axe-core color-contrast rule:
withRules(['color-contrast']) - ✓ Extract computed colors:
getComputedStyle(el).colorandbackgroundColor - ✓ Verify 4.5:1 ratio for normal text (AA), 7:1 for AAA compliance
- ✓ Test both light and dark themes for contrast violations
- ✓ Check placeholder text contrast separately from input text
