AccessibilityStandards
Accessibility Standards
Why This Matters
DroidBuilders serves diverse communities -- including children's hospitals, schools, and events that attract visitors of all ages and abilities. Our digital and physical communications should be readable and usable by as wide an audience as possible. For an education organization, accessibility is mission.
Color Contrast
All text must meet WCAG 2.1 AA minimum contrast ratios. For key communications (hospital materials, school handouts, public-facing web), target AAA.
| Ratio | Standard | Where to Apply |
|---|---|---|
| 4.5:1 | AA -- Normal text | Minimum for all body text |
| 3:1 | AA -- Large text | Minimum for text 18pt+ or bold 14pt+ |
| 7:1 | AAA -- Normal text | Target for high-impact / critical content |
Pre-verified combinations from the Dark Theme Palette:
| Text Color | Background Color | Ratio | Level |
|---|---|---|---|
White #FFFFFF
|
Deep Space #060D1A
|
19.5:1 | AAA ✓ |
White #FFFFFF
|
Dark Surface #0A1628
|
16.3:1 | AAA ✓ |
White #FFFFFF
|
Card Surface #0F2040
|
12.4:1 | AAA ✓ |
Gold #FFC20E
|
Dark Surface #0A1628
|
9.1:1 | AAA ✓ |
Gold #FFC20E
|
Deep Space #060D1A
|
10.7:1 | AAA ✓ |
Deep Navy #003468
|
White #FFFFFF
|
12.0:1 | AAA ✓ |
Deep Navy #003468
|
Gold #FFC20E
|
4.8:1 | AA ✓ |
Cool Gray #BABCBE
|
Dark Surface #0A1628
|
7.9:1 | AAA ✓ |
Check your combinations: WebAIM Contrast Checker at webaim.org/resources/contrastchecker
Image Alt Text
Every image published online must include descriptive alt text communicating the content and context.
Formula: [Subject] [action or state] [context or setting]
Examples:
- ❌
alt="droid.jpg" - ✅
alt="An R2-D2 replica with its dome open as a volunteer shows the motors to a child at a school STEM event"
For decorative images (backgrounds, dividers, purely aesthetic elements): use alt="" so screen readers skip them.
Typography Accessibility
- Minimum body text size: 16px on all digital surfaces
- Do not rely on color alone to convey meaning -- pair it with text labels, icons, or patterns
- Ensure adequate line spacing (minimum 1.5x the font size for body text)
- Avoid justified text alignment -- it creates irregular spacing that reduces readability for users with dyslexia
Interactive Elements
- All clickable elements must have a minimum touch target of 44x44 pixels on mobile
- Focus states must be visible for keyboard navigation (do not use
outline: nonewithout a custom focus style) - Form inputs must have associated text labels (not just placeholder text)