Accessibility

VDL is designed to meet WCAG 2.1 AA contrast requirements across all three themes. This page documents contrast ratios, color blindness considerations, and reduced motion support.

Contrast Ratios

Navy Theme (Default)

Light Theme

Status Colors

All status colors maintain AA contrast on their respective backgrounds:

Light theme guideline: On light backgrounds, use status colors for solid fills (badges, icons) rather than standalone text. Use darker variants (-700, -900) for text on light.

Color Blindness

Design Principles

VDL never relies on color alone to convey information:

1. Shape + Color: Status indicators pair color with icons (checkmark, exclamation, X)
2. Text labels: All colored badges include text labels
3. Pattern differentiation: Charts use distinct line styles alongside colors

Zone Color Distinction

The 5 zone colors are chosen for maximum perceptual distance:

Risk area: Amber and Emerald can be confused under deuteranopia/protanopia. Mitigation: these zones always include text labels and never appear side-by-side without additional differentiation (icon, position, or pattern).

Chart Palette

The 8-color chart palette prioritizes blue/orange separation (maximally distinct under most forms of color blindness):

#6366F1 → #8B5CF6 → #06B6D4 → #10B981 → #F59E0B → #EF4444 → #EC4899 → #F97316

For critical data comparisons, pair colors from opposite ends of the palette (indigo + amber, violet + emerald).

Reduced Motion

VDL respects the prefers-reduced-motion: reduce media query.

What Changes

When reduced motion is active:

Implementation

All VDL animations use centralized classes that include the media query override:

@media (prefers-reduced-motion: reduce) {
  .vdl-animate-fade-in,
  .vdl-animate-fade-in-up,
  .vdl-animate-spring-pop,
  /* ... all animation classes */ {
    animation: none;
  }
}

No information is lost when animations are disabled. Elements appear in their final state.

Testing

To test reduced motion:

• macOS: System Settings → Accessibility → Display → Reduce motion
• Windows: Settings → Accessibility → Visual effects → Animation effects → Off
• Chrome DevTools: Rendering tab → Emulate CSS media → prefers-reduced-motion: reduce

Focus Management

Focus Ring

All interactive elements use the VDL focus ring:

--vdl-shadow-focus-ring: 0 0 0 3px rgba(99, 102, 241, 0.25);

This provides a 3px indigo ring that is visible against both dark and light backgrounds. The ring uses box-shadow rather than outline for consistent rendering across browsers.

Keyboard Navigation

• Tab order follows visual layout (no tabindex > 0)
• Focus trapping in modals and dialogs
• Escape key closes overlays
• Arrow keys navigate within menus and lists

Screen Reader Considerations

• Logo SVGs include appropriate alt text
• Decorative elements use aria-hidden="true"
• Status messages use role="status" or role="alert"
• Charts include aria-label descriptions of data trends