Accessible Branding
Build accessibility into your brand identity from the start—colors, fonts, logos, and visual elements that work for everyone.
UA Branding and Accessibility
Accessible branding isn't a limitation—it's an opportunity to create designs that reach more people effectively. The University of Arizona committed to digital accessibility requires all brand materials to meet WCAG 2.2 Level AA standards.
Why It Matters at UA
- Inclusive Excellence: Our brand should reflect our commitment to all members of the Wildcat family.
- Legal Compliance: Higher education institutions must meet Title II requirements for all digital communications by 2026.
- Better Design: Accessible design often improves usability and clarity for everyone, especially on mobile devices.
Plan Accessibility Early
It's much easier to build accessibility into brand guidelines from the start than to retrofit later. Include accessibility requirements in:
- Color palette documentation
- Typography standards
- Logo usage guidelines
- Template libraries
- Photography/imagery guidelines
Accessible Color Palettes
Contrast Requirements
WCAG requires minimum contrast ratios between text and background colors:
| Use Case | Minimum Ratio | Enhanced (AAA) |
|---|---|---|
| Body text | 4.5:1 | 7:1 |
| Large text (18pt+/14pt bold) | 3:1 | 4.5:1 |
| UI components | 3:1 | — |
| Focus indicators | 3:1 | — |
Building an Accessible Palette
- Start with brand primaries:Test your main colors against white and black backgrounds
- Create accessible pairings:Document which colors can be used together
- Add utility colors:Include colors specifically for text, backgrounds, and borders
- Test in context:Check contrast in actual use cases like buttons, links, and text
Example: UArizona Colors
| Color | Hex | Use on White | Use on Black |
|---|---|---|---|
| Arizona Red | #AB0520 | 7.3:1 (body text OK) | 2.9:1 (fails) |
| Navy Blue | #0C234B | 14.2:1 (excellent) | 1.5:1 (fails) |
| Oasis Blue | #378DBD | 3.2:1 (large text only) | 6.6:1 (body text OK) |
Color Pairing Documentation
In brand guidelines, document accessible combinations:
Approved pairings:
- Arizona Red text on white background (for headings and emphasis)
- Navy text on white background (for body text)
- White text on Navy background (for dark sections)
- White text on Arizona Red background (for buttons and alerts)
Avoid:
- Oasis Blue text on white (insufficient contrast for body text)
- Light gray text on any background
Tools for Checking Contrast
- WebAIM Contrast Checker
- Stark (Figma plugin)
- Accessible Colors— suggests accessible alternatives
- Colorable— palette contrast testing
Typography
Choosing Accessible Fonts
Not all fonts are equally readable. Look for:
- Clear letterforms:Distinguish between similar characters (I, l, 1; O, 0)
- Consistent spacing:Even letter and word spacing
- Open counters:Interior spaces in letters like "a", "e", "o" should be open
- x-height:Taller lowercase letters improve readability
- Weights available:Multiple weights (regular, medium, bold) for hierarchy
Recommended Font Types
| Type | Good For | Examples |
|---|---|---|
| Sans-serif | Digital screens, body text | Open Sans, Source Sans Pro, Inter, Atkinson Hyperlegible |
| Serif | Print, headings | Georgia, Merriweather, Source Serif Pro |
| Monospace | Code, tabular data | Source Code Pro, JetBrains Mono |
Tip:Atkinson Hyperlegibleis a free font designed specifically for low vision readers.
Fonts to Avoid
- Decorative or script fonts for body text
- All-caps text for long passages
- Ultra-light weights (100-200) for body text
- Condensed fonts for extended reading
- Fonts without multiple weights
Sizing Guidelines
| Element | Minimum | Recommended |
|---|---|---|
| Body text (web) | 16px | 16-18px |
| Body text (print) | 10pt | 11-12pt |
| Line height | 1.4 | 1.5-1.6 |
| Paragraph spacing | — | 1.5× line height |
| Line length | — | 50-75 characters |
Logos and Icons
Logo Requirements
- Provide multiple versions:Full color, single color, reversed (white on dark)
- Don't rely on color alone:Logo should be recognizable in grayscale
- Minimum size:Document the smallest size where the logo remains legible
- Clear space:Define minimum padding around the logo
- Alt text guidance:Provide recommended alt text for digital use
Logo Alt Text
Document standard alt text for your logo:
<!-- Standalone logo (links to home) -->
<img src="logo.svg" alt="University of Arizona">
<!-- Logo next to name (decorative) -->
<img src="logo.svg" alt="">
<span>University of Arizona</span>Icon Guidelines
- Size:Minimum 24×24px touch target for interactive icons
- Contrast:3:1 against background
- Labeling:Provide text labels for icon-only buttons, or accessible names
- Consistency:Use the same icon for the same action across all materials
Icon Implementation
<!-- Icon with visible label (preferred) -->
<button>
<svg aria-hidden="true">...</svg>
Download PDF
</button>
<!-- Icon-only button (add aria-label) -->
<button aria-label="Search">
<svg aria-hidden="true">...</svg>
</button>Imagery and Photography
Inclusive Imagery
Brand photography should represent diversity:
- Include people with visible and non-visible disabilities
- Show assistive technology in natural use
- Represent diverse ages, ethnicities, and abilities
- Avoid "inspiration porn"—people with disabilities as heroes for basic activities
Alt Text Style Guide
Include alt text guidelines in your brand standards:
Photography alt text should:
- Describe the content and context, not just "photo of..."
- Include relevant details about people, actions, and settings
- Be concise (125 characters or less when possible)
- Not mention disability unless relevant to the message
Example:"Student using a laptop in the library with study group" rather than "Photo of students" or "Wheelchair user studying."
Text Over Images
When placing text over images:
- Add a semi-transparent overlay to ensure contrast
- Test contrast with the lightest and darkest parts of the image
- Avoid placing text over busy image areas
- Consider using solid color blocks for text areas
Accessible Templates
Build Accessibility In
Create templates with accessibility built in:
Document Templates
- Pre-configured heading styles
- Accessible color schemes
- Proper table structure
- Alt text placeholders
- Instructions for users
Presentation Templates
- Slide layouts with proper reading order
- Unique slide titles (placeholders that require completion)
- High-contrast text styles
- Speaker notes section
Social Media Templates
- Text-safe zones for important content
- Alt text guidelines
- Contrast-checked color combinations
- Camel case guidance for hashtags
Email Templates
- Semantic HTML structure
- Alt text for all images
- Accessible button styles
- Plain text version