Drl-admin: Created page with "==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. {..."

2026-05-31T21:13:00Z

Created page with "==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. {..."

New page

==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.

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Ratio
! style="background-color:#003468; color:#FFFFFF;" | Standard
! style="background-color:#003468; color:#FFFFFF;" | 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)====

{| class="wikitable" style="width:100%; text-align:center;"
! style="background-color:#003468; color:#FFFFFF;" | Text Color
! style="background-color:#003468; color:#FFFFFF;" | Background Color
! style="background-color:#003468; color:#FFFFFF;" | Contrast Ratio
! style="background-color:#003468; color:#FFFFFF;" | Level
|-
| style="background-color:#060D1A; color:#FFFFFF; padding:8px;" | White #FFFFFF
| style="background-color:#060D1A; color:#FFFFFF;" | Deep Space #060D1A
| 19.5:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#0A1628; color:#FFFFFF; padding:8px;" | White #FFFFFF
| style="background-color:#0A1628; color:#FFFFFF;" | Dark Surface #0A1628
| 16.3:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#0F2040; color:#FFFFFF; padding:8px;" | White #FFFFFF
| style="background-color:#0F2040; color:#FFFFFF;" | Card Surface #0F2040
| 12.4:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#0A1628; color:#FFC20E; padding:8px;" | Gold #FFC20E
| style="background-color:#0A1628; color:#FFFFFF;" | Dark Surface #0A1628
| 9.1:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#060D1A; color:#FFC20E; padding:8px;" | Gold #FFC20E
| style="background-color:#060D1A; color:#FFFFFF;" | Deep Space #060D1A
| 10.7:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#FFFFFF; color:#003468; padding:8px;" | Deep Navy #003468
| style="background-color:#FFFFFF; color:#003468;" | White #FFFFFF
| 12.0:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|-
| style="background-color:#FFC20E; color:#003468; padding:8px;" | Deep Navy #003468
| style="background-color:#FFC20E; color:#003468;" | Gold #FFC20E
| 4.8:1
| style="background-color:#FFFFAA; color:#003468;" | AA
|-
| style="background-color:#0A1628; color:#BABCBE; padding:8px;" | Cool Gray #BABCBE
| style="background-color:#0A1628; color:#FFFFFF;" | Dark Surface #0A1628
| 7.9:1
| style="background-color:#AAFFAA; color:#003468;" | AAA
|}

<div style="background-color:#0A1628; border:1px solid #003468; color:#BABCBE; padding:12px 16px; margin:12px 0;">
Check additional combinations using the WebAIM Contrast Checker:
https://webaim.org/resources/contrastchecker/
</div>

===Image Alt Text===

Every image published online must include descriptive alt text.

'''Formula:''' [Subject] [action or state] [context or setting]

{| class="wikitable" style="width:100%"
! style="background-color:#6B0000; color:#FFFFFF; width:50%;" | Avoid
! style="background-color:#004400; color:#FFFFFF; width:50%;" | 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 <code>alt=""</code> -- 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===

{| class="wikitable" style="width:100%"
! style="background-color:#003468; color:#FFFFFF;" | Element
! style="background-color:#003468; color:#FFFFFF;" | 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
|}

[[Category:Branding]]

AccessibilityStandards - Revision history