Accessible Branding

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.

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

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)

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

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.

• 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)

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.

• 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

• 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)

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

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:

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

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.

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

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

• 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>

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

/* 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?

• 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

• 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)

• 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

• 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

• 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

• 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