Accessible Branding

UA Branding and Accessibility

Accessible branding isn’t a limitation — it’s a strategic advantage. Designs that meet accessibility standards reach more people, perform better on all devices, work in all environments (sunlight, dark rooms, low-bandwidth), and demonstrate UA’s commitment to inclusive excellence.

Why It Matters at UA

• Inclusive Excellence: Our brand should reflect our commitment to all members of the Wildcat family — including the 26% of adults with disabilities
• Legal Compliance: ADA Title II requires all UA digital communications to meet WCAG 2.1 AA by April 2026. Brand materials are included.
• Better Design: Accessible design constraints often produce cleaner, more effective communications. High contrast = more readable. Clear fonts = more professional. Logical structure = easier to scan.
• Broader Reach: Accessible communications work better for everyone — mobile users, people in bright sunlight, people reading quickly, ESL readers, and people using assistive technology

Plan Accessibility Early

Retrofitting accessibility into existing brand materials is expensive and time-consuming. Build it in from the start:

• Color palette documentation → Include contrast ratios and approved pairings
• Typography standards → Specify accessible font families, minimum sizes, and spacing
• Logo usage guidelines → Include alt text recommendations and minimum sizes
• Template libraries → Build accessibility into every template, not as an add-on
• Photography/imagery guidelines → Include alt text style guide and inclusive representation standards

WCAG Criteria for Brand Materials

Getting Started: 5-Minute Brand Check

Before diving into the details, run this quick check on any brand material you’re creating:

The 5-Question Brand Accessibility Check

1. Can you read every word? Check that all text has sufficient contrast against its background — test with the WebAIM Contrast Checker
2. Can you read it on a phone? Text should be large enough to read without zooming. Body text: 16px minimum for web.
3. Does it work in grayscale? If you remove all color, can you still understand the content? Color must not be the only way information is conveyed.
4. Is the text real text? Text that’s part of an image can’t be resized, searched, translated, or read by screen readers. Use real text whenever possible.
5. Does every image have alt text guidance? When the brand material includes images, document what the alt text should be.

If all five answers are “yes”, your brand material is in good shape. Read on for the detailed guidance.

Accessible Color Palettes

Contrast Requirements (WCAG 1.4.3, 1.4.11)

WCAG defines minimum contrast ratios between text/graphics and their backgrounds:

What counts as “large text”? 18pt (24px) regular weight, or 14pt (18.5px) bold. Anything smaller must meet the stricter 4.5:1 ratio.

Building an Accessible Palette

1. Start with brand primaries: Test your main colors against white and black backgrounds
2. Create approved pairings: Document every text/background combination and its contrast ratio
3. Add utility colors: Define colors specifically for text, backgrounds, borders, links, and states
4. Test in context: Check contrast in actual use — buttons, links, form fields, headings, body text
5. Test for color blindness: Run your palette through Who Can Use or Coblis Color Blindness Simulator

UArizona Brand Colors — Contrast Reference

Approved Text/Background Pairings

Safe to use everywhere (body and heading text):

Use with caution (large text and icons only):

Never use:

• Light gray text on white or light backgrounds
• Oasis Blue for body text on light backgrounds
• Any color-only state indication without a text/icon companion
• Red and green as the only differentiators (color blindness)

Tools for Checking Contrast

Typography

Choosing Accessible Fonts

Not all fonts are equally readable. The characteristics that matter most:

• Clear letterforms: Can you distinguish between I (capital i), l (lowercase L), and 1 (the number)? Between O (letter) and 0 (zero)?
• Consistent spacing: Even letter and word spacing without cramped or variable widths
• Open counters: The interior spaces in letters like “a”, “e”, “g”, “o” should be generous
• Good x-height: Taller lowercase letters relative to capitals improves readability
• Multiple weights: Regular, medium, bold, and semibold available for hierarchy without relying on size alone

Recommended Font Types

Recommendation: Atkinson Hyperlegible is a free font designed by the Braille Institute specifically for low-vision readers. It maximizes character distinction — every letter is as different as possible from every other letter. Consider it for any audience that includes people with low vision.

Fonts to Avoid

• Decorative or script fonts for body text (Papyrus, Comic Sans, Brush Script)
• All-caps text for more than a few words (harder to read, screen readers may spell out)
• Ultra-light weights (100–200) for body text (disappear on lower-quality displays)
• Condensed fonts for extended reading (reduced letter spacing strains eyes)
• Fonts without multiple weights (can’t create hierarchy without changing size)
• Custom icon fonts without text alternatives (use SVG icons instead)

Sizing Guidelines

Text Spacing (WCAG 1.4.12)

Users with dyslexia and low vision may override your text spacing settings. Your design must not break when these overrides are applied:

How to support this: Use relative units (em, rem, %) instead of fixed pixels for spacing. Don’t clip overflow on text containers. Test by applying the above overrides in your browser’s dev tools.

Logos and Icons

Logo Accessibility Requirements

• Provide multiple versions: Full color, single color (for dark backgrounds), and reversed (white on dark)
• Don’t rely on color: Logo should be recognizable in grayscale — test by desaturating
• Minimum size: Document the smallest size where the logo remains legible (typically 30–40px height for web)
• Clear space: Define minimum padding around the logo so it doesn’t blend with surrounding content
• Alt text guidance: Document the standard alt text for each use case

Logo Alt Text Patterns

<!-- Logo linking to homepage — accessible pattern -->
<a href="/">
  <img src="ua-logo.svg" alt="University of Arizona — Home">
</a>

<!-- Logo with adjacent text name — decorative -->
<div class="brand">
  <img src="ua-logo.svg" alt="">
  <span>University of Arizona</span>
</div>

Icon Guidelines

• Size: Minimum 24×24px visual size; minimum 44×44px touch/click target
• Contrast: 3:1 against adjacent background (WCAG 1.4.11)
• Labels: Always provide text labels alongside icons — icon-only buttons need aria-label
• Consistency: Same icon = same action across all brand materials
• Format: Use SVG for web icons (scalable, styleable, accessible)

Accessible Icon Implementation

<!-- Preferred: Icon with visible text label -->
<button>
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-download"></use>
  </svg>
  Download Report
</button>

<!-- When icon-only is necessary: provide aria-label -->
<button aria-label="Search">
  <svg aria-hidden="true" focusable="false">
    <use href="#icon-search"></use>
  </svg>
</button>

<!-- Never: icon without any accessible name -->
<!-- ❌ <button><svg>...</svg></button> -->

Imagery and Photography

Inclusive Representation

Brand photography should authentically represent the full diversity of the Wildcat community:

• Disability representation: Include people with visible and non-visible disabilities in natural settings — studying, socializing, working, and leading
• Assistive technology: Show assistive technology (wheelchairs, screen readers, hearing aids, service animals) in everyday, organic use — not as the focal point of the image
• Diversity beyond disability: Represent diverse ages, ethnicities, body types, gender expressions, and cultural backgrounds
• Avoid “inspiration porn”: Don’t frame people with disabilities as heroic for doing ordinary activities. People studying, working, and living are just people.
• Context matters: People with disabilities should appear in all types of content, not only in disability-related materials

Alt Text Style Guide

Include these guidelines in your brand standards documentation:

Photography alt text should:

• Describe the content and context, not the visual style (“Student presenting research at poster session” not “Photo of students”)
• Include relevant details about people, actions, settings, and objects
• Be concise — 125 characters or less when possible; longer for complex images with essential detail
• Not mention disability unless it’s directly relevant to the message
• Use neutral, respectful language when disability is relevant (“student using a wheelchair” not “wheelchair-bound student”)

Alt text examples:

Text Over Images

When placing text over photographs or illustrations:

1. Add a solid or semi-transparent overlay: Use UA Navy or white at 80–90% opacity behind text
2. Test worst-case contrast: Check the text against both the lightest and darkest areas visible through the overlay
3. Better alternative: Use a solid color block for the text area; place the photo adjacent to or above the text
4. Avoid: Transparent text overlays, text over busy image areas, gradient overlays that create inconsistent contrast
5. Test at multiple sizes: Contrast that works on desktop may fail on mobile where the image and text are smaller

Accessible Templates

Why Templates Matter

Templates with accessibility built in are the highest-leverage investment you can make. A single accessible template can prevent thousands of inaccessible documents.

Document Templates (Word, Google Docs)

Build these features into every document template:

• Pre-configured heading styles (Heading 1, 2, 3) with UA fonts and colors
• Accessible color palettes — only approved color pairings in the theme
• Table styles with header row formatting and clear borders
• Alt text placeholder — include a text box near images that says “⚠️ Add alt text to this image”
• Metadata fields — document title, author, language pre-filled
• Instructions — a “How to use this template accessibly” section on the last page (delete before sharing)

Template distribution: Store templates in a central SharePoint location or shared drive. Include a README with accessibility instructions.

Presentation Templates (PowerPoint, Google Slides)

• Slide layouts with content placeholders in proper reading order (Title → Content → Notes)
• Unique slide title placeholders — every slide must have a unique title (even if visually hidden)
• High-contrast text styles — UA Navy on white or white on UA Navy
• Alt text guidance — instruction text in notes section: “Add alt text to all images on this slide”
• Speaker notes section — encourage presenters to write detailed notes (they serve as a text alternative)
• Slide master fonts — set to accessible system fonts, minimum 24pt for body, 36pt+ for titles

Testing your template: Create 3–4 sample slides with different content types (text, images, charts, tables). Run the PowerPoint Accessibility Checker. Navigate with Tab to verify reading order. Present with a screen reader to test the full experience.

Social Media Templates (Canva, Photoshop)

• Text-safe zones marked clearly — ensure text always has a high-contrast background
• Minimum font sizes enforced — 24pt+ for standard social image sizes
• Color-checked palettes — only approved brand color combinations loaded
• Alt text guide — include a companion document with alt text writing instructions
• CamelCase hashtag guide — #BearDown not #beardown, #WildcatWednesday not #wildcatwednesday

See the Canva & Accessible Flyers guide for detailed social media publishing patterns.

Email Templates (HTML, Mailchimp, Emma)

• Semantic HTML structure — proper <h1>, <h2>, <p> tags (not <div> with inline styles for everything)
• Alt text on all images — including the header banner, logo, and decorative elements
• Accessible button styles — real <a> links styled as buttons with sufficient contrast and padding
• Plain text version — always provide a plain text alternative for every HTML email
• Preview text — write meaningful preview text (the first ~90 characters visible in inbox)
• Table-based layout (for email) — use role="presentation" on layout tables so screen readers skip the table structure

<!-- Accessible email button -->
<a href="https://example.arizona.edu/register" 
   style="background-color:#AB0520; color:#ffffff; 
          padding:12px 24px; text-decoration:none; 
          border-radius:4px; font-size:16px; 
          display:inline-block;">
  Register for the Workshop
</a>

Template Maintenance

• Review quarterly: Check that templates still meet current brand guidelines and accessibility standards
• Version control: Date-stamp templates and retire old versions
• Feedback loop: Include a “Report an accessibility issue” contact in template documentation
• Testing: Run the accessibility checker on template samples annually

Dark Mode & High Contrast

Supporting Display Preferences

Modern operating systems let users choose display modes. Your brand colors need to work in all of them:

• Light mode: Standard — light backgrounds, dark text (your default palette)
• Dark mode: Inverted — dark backgrounds, light text (increasingly popular)
• High contrast: Enhanced contrast for users with low vision
• Inverted colors: Full color inversion at the OS level

Dark Mode Color Considerations

CSS Implementation

/* Define brand colors as CSS custom properties */
:root {
  --ua-navy: #0C234B;
  --ua-red: #AB0520;
  --ua-oasis: #378DBD;
  --ua-bg: #FFFFFF;
  --ua-text: #0C234B;
  --ua-text-muted: #4A4A4A;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --ua-bg: #1a1a1a;
    --ua-text: #EBEBEB;
    --ua-text-muted: #B0B0B0;
    /* Verify all contrast ratios in dark mode */
  }
}

/* High contrast mode */
@media (prefers-contrast: more) {
  :root {
    --ua-text: #000000;
    --ua-bg: #FFFFFF;
    /* Maximum contrast */
  }
}

Testing dark mode: Enable dark mode on your OS, then view your site/document. Does every text element remain readable? Are interactive elements still distinguishable? Do images with transparent backgrounds look wrong?

Brand Accessibility Checklist

Color Palette

• All text/background pairings meet 4.5:1 contrast (body text)
• Large text pairings meet 3:1 contrast (18pt+ or 14pt+ bold)
• UI components (buttons, icons, borders) meet 3:1 contrast
• Approved color pairings documented with exact ratios
• Failing pairings documented with clear “do not use” warnings
• Colors tested with color blindness simulators
• Color is never the only way information is conveyed
• Dark mode colors tested for contrast compliance

Typography

• Primary font has clear, distinguishable letterforms (I/l/1, O/0)
• Minimum font sizes documented (16px web, 10pt print)
• Line height set to 1.5 or greater for body text
• Paragraph spacing defined (not just line breaks)
• Maximum line length documented (50–75 characters recommended)
• Multiple font weights available for hierarchy without relying on size alone
• Text spacing overrides tested (WCAG 1.4.12)

Logos and Icons

• Multiple logo versions available (color, single-color, reversed)
• Logo is recognizable in grayscale
• Standard alt text documented for each use case
• Minimum logo size specified
• Clear-space requirements defined
• Icons meet 3:1 contrast against backgrounds
• Icons have text labels or aria-label attributes
• Touch/click targets are at least 44×44px

Imagery

• Photography represents diverse people including those with disabilities
• Alt text style guide included in brand standards
• Text-over-image guidelines specify overlay requirements
• Decorative vs. meaningful image distinction documented

Templates

• Document templates have pre-configured heading styles
• Presentation templates have proper reading order and unique slide titles
• Email templates include alt text on all images and a plain text version
• Social media templates enforce minimum font sizes and contrast
• All templates tested with the platform’s accessibility checker
• Template instructions include accessibility reminders

Process

• Brand guidelines document includes accessibility requirements (not separate)
• New brand materials are reviewed for accessibility before approval
• Template library is reviewed and updated quarterly
• Team members have received accessibility training for their role

Resources

On This Site

• Color and Contrast Guide — Comprehensive contrast testing and requirements
• Writing Meaningful Links — Link text best practices
• Canva & Accessible Flyers — Creating accessible graphics in Canva
• Adobe Creative Suite — Accessibility in InDesign, Photoshop, Illustrator
• Accessible Newsletter Design — Email accessibility in depth
• Accessible Presentations — PowerPoint accessibility guide
• Do’s and Don’ts — Quick-reference accessibility guides

External Resources

• UArizona Brand Guidelines — Official UA brand standards
• Arizona Quickstart — UA web development framework with built-in brand compliance
• WebAIM Contrast Checker — Quick contrast ratio testing
• Atkinson Hyperlegible Font — Free font designed for low vision readers
• Inclusive Design Principles — Design thinking framework
• Who Can Use — Color vision deficiency simulation

Need Help?

• Brand questions: UA MarCom Brand Team
• Accessibility questions: accessibility@arizona.edu
• Web development: Arizona Digital / Quickstart
• Consultation: Submit a request