Why Accessibility Matters
⚖️
Legal Requirement
ADA, Section 508, and WCAG compliance is legally required for many organizations.
👥
15% of Users
Over 1 billion people worldwide have some form of disability.
🎯
Better for Everyone
Good contrast and clear labels help all users, not just those with disabilities.
See it in action
buoy-cli
$
⚓ Running accessibility checks...
✗ Found 3 accessibility issues
[Critical] Missing alt text
└─ src/components/Avatar.tsx:12
<img src={user.avatar} />
[Warning] Low color contrast
└─ src/components/Badge.tsx:8
text-gray-400 on bg-gray-100 (ratio: 2.5:1)
[Warning] Missing aria-label
└─ src/components/IconButton.tsx:5
<button><Icon /></button>
What We Check
critical
Color Contrast
Ensures text meets WCAG 2.1 contrast requirements (4.5:1 for normal text, 3:1 for large text)
critical
Alt Text
Detects images without alt attributes or with empty alt on decorative images
warning
ARIA Labels
Catches buttons with only icons and no accessible label
warning
Focus Indicators
Warns when focus styles are removed without replacement
info
Semantic HTML
Suggests semantic elements over divs with roles
info
Heading Order
Ensures headings follow logical hierarchy (h1 → h2 → h3)
Color Contrast Checking
✗ Failing Contrast
This text is hard to read
Contrast ratio: 2.5:1 (needs 4.5:1)
✓ Passing Contrast
This text is easy to read
Contrast ratio: 5.3:1 (passes AA)
Works with Your Design Tokens
Checks token combinations
Checking token color pairs for WCAG compliance...
✓ --color-text on --color-bg 7.2:1 (AAA)
✓ --color-text-muted on --color-bg 5.1:1 (AA)
✗ --color-text-muted on --color-bg-alt 2.8:1 (FAIL)
└─ Suggest: Use --color-text instead
✓ --color-primary on --color-bg 4.8:1 (AA)
✗ --color-primary on --color-primary-bg 1.9:1 (FAIL)
└─ Suggest: Darken --color-primary-bg