AccessibilityStandards
Accessibility Standards
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.
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 compliance.
| 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 and critical content |
Pre-Verified Combinations (Dark Theme)
| Text Color | Background Color | Contrast 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 additional combinations using the WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
Image Alt Text
Every image published online must include descriptive alt text.
Formula: [Subject] [action or state] [context or setting]
| Avoid | Preferred |
|---|---|
| alt="droid.jpg" | alt="An R2-D2 replica interacting with a child in a hospital corridor
during a DroidBuilders volunteer visit" |
| alt="event photo" | alt="DroidBuilders volunteers posing with BB-8 and R2-D2 at a school
visit in Phoenix" |
For decorative images (backgrounds, dividers, purely aesthetic
elements): use alt="" -- an empty alt attribute tells screen
readers to skip the image entirely.
Typography Accessibility
- Minimum body text size: 16px on all digital surfaces
- Do not rely on color alone to communicate meaning -- pair color with text labels, icons, or patterns
- Minimum line spacing: 1.5 times the font size for body text
- Avoid justified text alignment -- it creates irregular spacing that reduces readability for users with dyslexia
Interactive Element Requirements
| Element | Requirement |
|---|---|
| Buttons, links, navigation | Minimum touch target of 44x44 pixels on mobile |
| Focus states (keyboard navigation) | Must be visible -- do not use outline:none without a custom focus style |
| Form inputs | Must have associated text labels -- placeholder text alone is not
sufficient |
| Images | Descriptive alt text required (see above) |
| Color-coded information | Must also use text labels or patterns -- do not rely on color alone |