aria-eyes Demo

See how aria-eyes catches mismatches between color claims in accessibility labels and actual CSS colors.

Color Claim Verification (WCAG 1.4.1)

aria-eyes scans aria-labels and alt text for color words, then checks if the element's actual CSS color matches. Here are examples of what it catches.

aria-label="blue submit button"
background-color: #1a73e8 mapped to blue
Match
PASS: "blue" matches background-color (blue)
aria-label="blue action button"
background-color: #e53e3e mapped to red
Mismatch
FAIL: Label claims "blue" but background-color is red (#e53e3e)
aria-label="crimson warning badge"
background-color: #dc143c mapped to red. "crimson" maps to red category.
Match
PASS: "crimson" matches background-color (red)
aria-label="green status indicator"
background-color: #f59e0b mapped to yellow
Mismatch
FAIL: Label claims "green" but background-color is yellow (#f59e0b)
aria-label="navy documentation link"
background-color: #000080 mapped to blue. "navy" maps to blue category.
Match
PASS: "navy" matches background-color (blue)
alt="red error icon"
background-color: #8b5cf6 mapped to purple
Mismatch
FAIL: Label claims "red" but background-color is purple (#8b5cf6)

Try It Yourself

Enter a color claim and a CSS color to see what aria-eyes would report.

Checking...

Contrast Ratio Checking (WCAG 1.4.3)

aria-eyes also calculates WCAG contrast ratios. Here are examples of passing and failing text.

The quick brown fox jumps over the lazy dog
#1a1d27 on #ffffff 16.6:1 AA
The quick brown fox jumps over the lazy dog
#c0c0c0 on #ffffff 1.6:1 Fail
The quick brown fox jumps over the lazy dog
#1a73e8 on #0f1117 4.9:1 AA
The quick brown fox jumps over the lazy dog
#666666 on #333333 2.2:1 Fail