This Hoverkraft Docusaurus theme follows the MDN Web Accessibility guidelines and implements WCAG 2.1 Level AA standards.

All colors used in the theme meet WCAG AA standards for contrast ratios:

All colors tested on white background (#ffffff):

• Primary (#0073cc): 4.86:1 contrast ratio ✓
• Primary Dark (#0066b8): 5.85:1 contrast ratio ✓
• Primary Darker (#0061ad): 6.34:1 contrast ratio ✓
• Primary Darkest (#00508f): 8.25:1 contrast ratio ✓
• Primary Light (#0076d6): 4.60:1 contrast ratio ✓
• Primary Lighter (#0076dc): 4.54:1 contrast ratio ✓
• Primary Lightest (#0072dc): 4.73:1 contrast ratio ✓
• Secondary (#cc4400): 4.78:1 contrast ratio ✓
• Info (#007bb8): 4.64:1 contrast ratio ✓
• Success (#007d38): 5.26:1 contrast ratio ✓
• Warning (#8a6b00): 5.02:1 contrast ratio ✓
• Danger (#d1242a): 5.25:1 contrast ratio ✓

• Primary button gradient (linear-gradient(135deg, #0073cc 0%, #cc4400 100%) on white text):
  • Start color: 4.86:1 contrast ratio ✓
  • End color: 4.78:1 contrast ratio ✓
  • Minimum: 4.78:1 (exceeds WCAG AA)
• Outline buttons: Use solid primary color borders (4.86:1) for proper contrast

All colors tested on dark background (#1d2026):

• Primary (#4da6ff): 6.38:1 contrast ratio ✓
• Primary Dark (#3399ff): 5.55:1 contrast ratio ✓
• Primary Darker (#268cff): 4.88:1 contrast ratio ✓
• Primary Darkest (#1487fa): 4.57:1 contrast ratio ✓
• Primary Light (#66b3ff): 7.35:1 contrast ratio ✓
• Primary Lighter (#73baff): 7.92:1 contrast ratio ✓
• Primary Lightest (#99ccff): 9.66:1 contrast ratio ✓
• Secondary text (#d3d7e2): 11.34:1 contrast ratio ✓
• White text (#ffffff): 16.32:1 contrast ratio ✓

• Outline buttons: Use primary-light color (#66b3ff) for borders (7.35:1 contrast ratio) ✓

• Normal text: 4.5:1 minimum contrast ratio
• Large text (18pt+ or 14pt+ bold): 3:1 minimum contrast ratio
• UI components: 3:1 minimum contrast ratio

All theme colors exceed the WCAG AA requirements for normal text.

All interactive elements are fully accessible via keyboard:

• Tab navigation: Navigate through all interactive elements
• Enter/Space: Activate links and buttons
• Skip to content: Press Tab on page load to reveal skip link
• Focus indicators: All focusable elements have visible 3px outlines

• Focus indicators use 3px solid outlines with 3px offset
• :focus-visible pseudo-class for keyboard-only focus states
• Mouse clicks don't show focus rings (better UX)
• Enhanced visibility in both light and dark modes:
  • Light mode: Uses primary color (#0073cc) for focus outlines
  • Dark mode: Uses primary-light color (#66b3ff) for better visibility
• Focus outlines are visible on all interactive elements

• Proper semantic HTML elements (<header>, <main>, <footer>, <nav>)
• ARIA landmarks for major page sections
• Descriptive aria-label attributes on all links
• aria-labelledby for navigation sections and main content
• SVG graphics include proper role="img" and <title> elements

• "Skip to main content" link at the top of every page
• Becomes visible on keyboard focus
• Allows screen reader users to bypass navigation

The theme respects prefers-reduced-motion settings:

• Animations are disabled when user prefers reduced motion
• Transitions are reduced to 0.01ms
• Scroll behavior changes to auto (instant)
• Ensures comfortable experience for users with vestibular disorders

• Logo hover animations only play when motion is preferred
• Smooth scrolling respects user preferences
• All animations can be disabled system-wide

The theme adapts to high contrast preferences:

• Enhanced primary colors in high contrast mode (#005299 for primary, #993300 for secondary)
• Solid backgrounds for gradient buttons to ensure maximum contrast
• Thicker focus outlines (4px instead of 3px)
• Thicker borders on outline buttons (3px instead of 2px)
• Enhanced borders for better element distinction
• Maintains usability for users with low vision

• Fonts use font-display: swap to prevent invisible text
• System fonts as fallback for immediate rendering
• Web fonts load asynchronously

• Body: Inter, system fonts
• Monospace: Roboto Mono, system monospace fonts

• Appropriate line heights (1.6 for body text)
• Sufficient spacing between elements
• Clear visual hierarchy

The theme is fully responsive and works across all devices:

• Mobile-first approach
• Touch targets meet minimum size requirements (44x44px)
• Viewport meta tag for proper mobile scaling
• Responsive images and layouts

Print styles ensure readable output:

• Removed background images and colors
• Black text for maximum contrast
• Appropriate font sizes (12pt)
• Hidden non-essential elements (skip links)

1. Keyboard navigation: Navigate entire site using only keyboard
2. Screen reader: Test with NVDA, JAWS, or VoiceOver
3. Zoom: Test at 200% zoom level
4. Color blindness: Use color blindness simulators
5. High contrast: Enable high contrast mode in OS

• axe DevTools
• WAVE
• Lighthouse
• Pa11y

All accessibility features work in modern browsers:

• Chrome/Edge 90+
• Firefox 88+
• Safari 14+
• Opera 76+

This theme aims to comply with:

• WCAG 2.1 Level AA
• Section 508
• EN 301 549
• ADA (Americans with Disabilities Act)

If you discover any accessibility issues, please report them via GitHub Issues with:

• Description of the issue
• Steps to reproduce
• Browser and assistive technology used
• Expected vs actual behavior

• MDN Web Accessibility
• WCAG 2.1 Guidelines
• WebAIM Resources
• A11y Project Checklist