Color Contrast

Color Contrast Checker

Overview

Validate and generate accessible color combinations that meet WCAG 2.1 contrast requirements. Check existing palettes or find compliant alternatives for any color pair.

When to Use

• Validating a color palette for accessibility
• Finding accessible text colors for a background
• Checking if brand colors meet WCAG standards
• Generating accessible color pairings from tokens

Quick Reference: WCAG Requirements

Large text: 18pt (24px) regular or 14pt (18.5px) bold

The Process

1. Get colors: Ask for foreground and background colors (hex, rgb, oklch, hsl)
2. Calculate ratio: Compute relative luminance and contrast ratio
3. Report compliance: Show AA/AAA pass/fail for text sizes
4. If failing: Suggest closest compliant alternatives
5. Batch mode: If given a palette, check all combinations

Contrast Ratio Scale

Output Formats

Single Pair Check:

Copy code
Contrast Check: #1a1a1a on #ffffff

Ratio: 16.1:1

✓ AA Normal Text (4.5:1)
✓ AA Large Text (3:1)
✓ AAA Normal Text (7:1)
✓ AAA Large Text (4.5:1)
✓ UI Components (3:1)

Verdict: Passes all WCAG 2.1 criteria

Failing Pair with Suggestions:

Copy code
Contrast Check: #6b7280 on #ffffff

Ratio: 4.0:1

✓ AA Large Text (3:1)
✗ AA Normal Text (4.5:1) - needs 4.5:1
✗ AAA Normal Text (7:1)
✓ UI Components (3:1)

Suggested fixes:
- Darken foreground to #5b6370 for AA (4.5:1)
- Darken foreground to #3d4351 for AAA (7:1)

Palette Matrix:

Copy code
Color Contrast Matrix (AA Normal Text = 4.5:1)

             white    gray-100  gray-900  primary
white          -        1.1       16.1      5.2
gray-100      1.1        -        14.5      4.7
gray-900     16.1      14.5        -        3.1
primary       5.2       4.7       3.1        -

Legend: ✓ = 4.5:1+ | ⚠ = 3:1-4.5:1 | ✗ = <3:1

CSS with Accessible Pairs:

cssCopy code
:root {
  /* Accessible text on light backgrounds */
  --text-on-light: #1f2937;      /* 14.5:1 on white */
  --text-muted-on-light: #4b5563; /* 7.2:1 on white */

  /* Accessible text on dark backgrounds */
  --text-on-dark: #f9fafb;        /* 18.1:1 on gray-900 */
  --text-muted-on-dark: #d1d5db;  /* 11.3:1 on gray-900 */

  /* Accessible text on brand color */
  --text-on-primary: #ffffff;     /* 5.2:1 on primary-500 */
}

Algorithm

Relative Luminance (L):

Copy code
For each RGB channel (0-255):
1. Normalize: value / 255
2. If ≤ 0.03928: channel / 12.92
3. Else: ((channel + 0.055) / 1.055) ^ 2.4

L = 0.2126 * R + 0.7152 * G + 0.0722 * B

Contrast Ratio:

Copy code
ratio = (L1 + 0.05) / (L2 + 0.05)
where L1 is lighter, L2 is darker

Common Patterns

Accessible grays on white:

Accessible brand colors:

• Light backgrounds: Darken brand to 500-700 range
• Dark backgrounds: Lighten brand to 300-400 range
• On brand: Use white (dark brands) or gray-900 (light brands)

Integration with Color Scale

When using with the color-scale skill:

Copy code
1. Generate palette with color-scale
2. Run contrast check on key combinations:
   - Text colors (900, 800) on backgrounds (50, 100)
   - Background (500) with white/dark text
   - Adjacent scale steps for borders
3. Adjust chroma/lightness if needed
4. Document accessible pairings

Testing Checklist

• Primary text on all background colors
• Secondary/muted text on backgrounds
• Interactive elements (buttons, links)
• Focus indicators against backgrounds
• Error, warning, success states
• Disabled states (3:1 minimum for discernible)
• Placeholder text in inputs