Version: 3.5.13

Accessibility

Beacon follows WCAG 2.1 Level AA standards to ensure accessible design for all users.

Overview

Accessibility is a core principle of the Beacon design system. All components and tokens are designed to meet WCAG 2.1 Level AA standards, ensuring that interfaces are usable by people with disabilities and work well with assistive technologies.

The design system provides accessible defaults through semantic tokens, proper contrast ratios, and component patterns that follow accessibility best practices.

Contrast Ratios

Beacon follows WCAG 2.1 Level AA contrast requirements for text readability:

  • 4.5:1 applies to normal text (body text, labels, paragraphs)
  • 3:1 applies to large text (≥18pt regular or ≥14pt bold)

All brand color tokens are designed to meet these contrast requirements when used with their paired foreground tokens. The Colors page includes a contrast ratio checker that validates pairings in the current theme context.

Normal Text
4.5:1 minimum

Required for body text, labels, and paragraphs. This ensures text is readable for users with low vision or color blindness.

+
Large Text
3:1 minimum

Required for large text (≥18pt regular or ≥14pt bold). Larger text is easier to read, so the contrast requirement is lower.

Key Principles

The design system incorporates accessibility through several key principles:

  • Semantic HTML: Components use proper HTML elements and ARIA attributes where needed
  • Keyboard Navigation: All interactive elements are keyboard accessible
  • Focus Management: Clear focus indicators and logical tab order
  • Color Contrast: All color pairings meet WCAG AA standards
  • Screen Reader Support: Proper labels, descriptions, and announcements
Usage Guidance

When building with Beacon, follow these accessibility guidelines:

Use Paired Tokens

Always use paired foreground and background tokens (e.g., --fg-on-action with --bg-primary) to ensure proper contrast. Avoid mixing tokens that haven't been validated together.

Test Contrast

Use the contrast ratio checker on the Colors page to verify text-background pairings, especially when creating custom combinations or using tokens in new contexts.

Don't Rely on Color Alone

Use color in combination with other visual indicators (icons, text, patterns) to convey information. This ensures accessibility for users with color vision deficiencies.

Do
  • Use semantic HTML elements
  • Provide text alternatives for images
  • Ensure keyboard accessibility
  • Test with screen readers
  • Verify contrast ratios
Don't
  • Don't rely on color alone to convey meaning
  • Don't create custom color combinations without testing contrast
  • Don't remove focus indicators
  • Don't use placeholder text as labels
  • Don't create keyboard traps