Back to Knowledge Base
Color & Contrast

Tools for Color Testing

11 min read

Tools for Testing Color Accessibility

Ensuring your colors meet accessibility standards requires the right testing tools. This comprehensive guide covers the best tools available, from browser extensions to design plugins to command-line utilities, and how to use them effectively in your workflow.

Browser-Based Tools

WebAIM Contrast Checker

The classic, trusted tool for quick contrast checks.

How to use:

  1. Visit webaim.org/resources/contrastchecker
  2. Enter foreground and background colors
  3. View pass/fail for WCAG AA and AAA levels

Best for: Quick spot-checking during development

Chrome DevTools

Built right into Chrome, no installation needed:

1. Right-click an element > Inspect
2. In Styles panel, click a color swatch
3. View "Contrast ratio" with pass/fail indicators
4. Use the color picker to find accessible alternatives

DevTools shows:

  • Current contrast ratio
  • Whether it passes AA/AAA for current text size
  • Suggestions for closest accessible colors

Firefox Accessibility Inspector

Firefox's built-in accessibility tools are excellent:

1. Open Developer Tools (F12)
2. Go to Accessibility tab
3. Enable "Check for issues" > Contrast
4. Browse the page to see highlighted issues

Browser Extensions

WAVE (Web Accessibility Evaluator)

Comprehensive accessibility testing including contrast:

  • Highlights contrast errors directly on page
  • Shows contrast ratio for each flagged element
  • Provides error details and WCAG references
After installing WAVE:
1. Click the WAVE icon on any page
2. Look for red contrast error icons
3. Click an icon for details
4. View suggested fixes

axe DevTools

Professional-grade accessibility testing:

javascript
// Can also run programmatically
const results = await axe.run();
const contrastIssues = results.violations.filter(
  v => v.id === 'color-contrast'
);

Color Contrast Analyzer Extension

Dedicated contrast checking:

  • Pick colors directly from the page
  • Test any two colors against WCAG
  • Simulate color blindness
  • Export reports

Design Tool Plugins

Figma: Stark

Industry-leading accessibility plugin:

1. Install Stark from Figma Community
2. Select two layers or a text element
3. Run Plugins > Stark > Contrast Checker
4. View pass/fail and get fix suggestions

Features:

  • Contrast checking
  • Color blindness simulation
  • Vision simulation
  • Focus order visualization

Figma: A11y - Color Contrast Checker

Free alternative to Stark:

1. Select a frame or artboard
2. Run the plugin
3. View all text/background combinations
4. See pass/fail for each pair

Sketch: Stark Plugin

Same great features as the Figma version:

1. Install from Sketch Plugin Directory
2. Select layers to check
3. View contrast analysis
4. Simulate vision conditions

Command-Line Tools

color-contrast-checker (npm)

bash
npm install -g color-contrast-checker

# Check two colors
color-contrast-checker "#ffffff" "#0066cc"
# Output: Contrast ratio: 4.9:1 - PASS (AA Large, AA Normal)

a11y-color-contrast (npm)

For CI/CD integration:

javascript
const a11yCC = require('a11y-color-contrast');

const result = a11yCC.isAccessible('#ffffff', '#0066cc');
console.log(result);
// { ratio: 4.9, isAANormal: true, isAALarge: true, isAAANormal: false }

Integration with CSS

PostCSS Plugin: postcss-colorguard

Prevent non-compliant colors from shipping:

javascript
// postcss.config.js
module.exports = {
  plugins: [
    require('postcss-colorguard')({
      threshold: 4.5,
      allowEquivalentNotation: true
    })
  ]
};

Testing in JavaScript

Custom Contrast Function

javascript
function getContrastRatio(color1, color2) {
  const lum1 = getLuminance(color1);
  const lum2 = getLuminance(color2);
  const brightest = Math.max(lum1, lum2);
  const darkest = Math.min(lum1, lum2);
  return (brightest + 0.05) / (darkest + 0.05);
}

function getLuminance(hexColor) {
  const rgb = hexToRgb(hexColor);
  const [r, g, b] = rgb.map(c => {
    c = c / 255;
    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? [
    parseInt(result[1], 16),
    parseInt(result[2], 16),
    parseInt(result[3], 16)
  ] : null;
}

Building a Testing Workflow

For comprehensive color accessibility:

  1. Design phase: Use Stark or similar plugins
  2. Development: Chrome DevTools for spot checks
  3. Review: WAVE or axe for full-page audits
  4. CI/CD: Automated contrast checking in tests
  5. Monitoring: AccessibilityMonitor for ongoing compliance

Was this article helpful?