Contrast Project

title: "Color Contrast Module Project" weight: 25 description: "Apply everything learned in this module: create a contrast-safe color system, test all color pairs, fix failing combinations, build a contrast checker, and produce a contrast compliance report." date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, color-contrast]

This capstone project combines all color contrast techniques from this module into a comprehensive contrast audit and remediation of a sample design system or your own project.

## Project Overview

You will audit the color contrast of a sample design system or your own site, document all color pairs, test against WCAG AA and AAA thresholds, fix failing combinations, and produce a compliance report.

## Project Steps

```mermaid
flowchart TD
  A[Inventory Colors] --> B[Pair Analysis]
  B --> C[Test Against AA]
  C --> D{All pass?}
  D -->|No| E[Fix Failures]
  D -->|Yes| F[Test Against AAA]
  E --> B
  F --> G[Document System]
  G --> H[Build Tools]
  H --> I[Final Report]

Step 1: Color Inventory

Document every color used in your design system or site. Include hex values, usage, and context.

const colorInventory = {
  text: {
    primary: '#333333',
    secondary: '#666666',
    disabled: '#999999',
    link: '#0056b3'
  },
  background: {
    primary: '#ffffff',
    secondary: '#f5f5f5',
    dark: '#1a1a1a'
  },
  interactive: {
    buttonBg: '#0056b3',
    buttonText: '#ffffff',
    buttonHoverBg: '#003d80',
    error: '#dc3545',
    success: '#28a745'
  },
  border: {
    default: '#cccccc',
    focus: '#4A90D9'
  }
};

Step 2: Contrast Analysis

For each foreground-background pair, calculate the contrast ratio and determine pass/fail status.

/* After fixing contrast issues */
:root {
  --text-primary: #1a1a1a; /* 14:1 against white -- AAA */
  --text-secondary: #555555; /* 5.1:1 against white -- AA */
  --text-disabled: #999999; /* 2.8:1 -- fails, but exempt */
  --link-color: #0056b3; /* 4.7:1 against white -- AA */
  --link-hover: #003d80; /* 6.2:1 against white -- AA */
  --error-text: #cc0000; /* 5.2:1 against white -- AA */
  --success-text: #1b7a2d; /* 4.6:1 against white -- AA */
}

Step 3: Build a Checker

Create a contrast checker tool as part of the project.

// Final color compliance report
function generateComplianceReport(colors) {
  const report = {
    totalPairs: 0,
    passingAA: 0,
    passingAAA: 0,
    failing: 0,
    details: []
  };

  colors.forEach(pair => {
    report.totalPairs++;
    const ratio = getContrastRatio(pair.fg, pair.bg);
    const passAA = ratio >= 4.5;
    const passAAA = ratio >= 7;

    if (!passAA) report.failing++;
    if (passAA) report.passingAA++;
    if (passAAA) report.passingAAA++;

    report.details.push({
      name: pair.name,
      fg: pair.fg,
      bg: pair.bg,
      ratio: ratio.toFixed(1),
      aa: passAA,
      aaa: passAAA
    });
  });

  return report;
}

Step 4: Non-text Contrast

Test all UI components, icons, focus indicators, and borders.

Deliverables

Submit: color inventory document, contrast analysis spreadsheet with all pairs and ratios, fixed color system with CSS custom properties, contrast checker tool, non-text contrast audit, and a final compliance report showing AA and AAA pass rates.

What's Next

Mobile Accessibility covers accessibility considerations for mobile devices.