Canva & Accessible Flyers

Why Flyer Accessibility Matters

Flyers are one of the most common communication formats at UA — event announcements, program promotions, call-for-proposals, and department newsletters all rely on visual graphics. But a flyer that’s published only as an image is invisible to:

• Screen reader users — They hear nothing unless alt text is provided
• People with low vision — They can’t zoom into a flat image without losing quality
• People with color vision deficiency — Color-only information is missed
• People on slow connections — Large image files may not load at all

The rule is simple: If the flyer contains information people need, that information must be available in an accessible format — not just as pixels in a picture.

WCAG Success Criteria That Apply

Before You Start

Choose Your Starting Point

UA Brand Compliance

Before designing, review these resources:

• Color tokens: Use UA brand colors — Arizona Red (#AB0520), UA Blue (#0C234B), and White are your safest high-contrast combinations
• Logo usage: Download approved logos from brand.arizona.edu and follow clear-space rules
• Templates: Check if your college or unit has approved Canva templates — start from those rather than from scratch
• See the Accessible Branding guide for complete UA color contrast ratios

Step-by-Step: Building an Accessible Flyer

Step 1: Set Up Your Canvas

1. Open canva.com and sign in with your UA credentials (if your unit has Canva for Teams)
2. Choose a template or create a custom size
3. Start with a solid background color — busy photo backgrounds make text harder to read for everyone

Step 2: Establish Visual Hierarchy

Organize information in a clear, logical reading order — top to bottom, most important first:

1. Event/program title — largest text, highest contrast
2. Date, time, and location — prominent but secondary
3. Brief description — what it is and who it’s for
4. Call to action — register, RSVP, learn more
5. Contact information — email, phone, URL
6. Logos and branding — bottom or corner placement

Why order matters: When you provide a text alternative, you’ll list information in this same order. A logical visual hierarchy makes the text version natural to write.

Step 3: Choose Accessible Typography

• Font size: Minimum 24pt for body text on a standard flyer (8.5×11). Titles should be 36pt or larger.
• Font weight: Use medium or bold weights. Avoid thin/light weights that disappear at small sizes.
• Font choice: Stick to clean sans-serif fonts — Open Sans, Lato, Montserrat, or Atkinson Hyperlegible are excellent choices.
• Avoid: Script fonts, decorative fonts, all-uppercase for more than a few words, and fonts with ambiguous letterforms (where “I”, “l”, and “1” look alike).

Step 4: Apply Color with Intention

• Primary text: Use UA Navy (#0C234B) or black on white/light backgrounds for body text
• Accent text: Arizona Red (#AB0520) on white is 7.3:1 — excellent for headings and emphasis
• Avoid: Light colors on light backgrounds, text directly on photos without an overlay
• Test: Use the WebAIM Contrast Checker to verify every text/background combination
• Don’t rely on color alone: If you color-code sections (e.g., red = deadline), also add a text label or icon

Step 5: Handle Images and Icons

• Decorative images: Background patterns, border decorations — these get empty alt text (alt="") when published
• Informational images: Photos that convey meaning, icons that indicate actions — these need descriptive alt text
• Charts or data visuals: Always provide the data in text form alongside or below the visual
• UA logos: Alt text should be “University of Arizona” (or empty if the university name appears as text nearby)

Step 6: Review Reading Order

Before exporting:

1. Hide all images and decorative elements mentally — does the text alone make sense?
2. Read content top-to-bottom, left-to-right — is the order logical?
3. Check that no essential information is conveyed only through visual position or color
4. Verify that dates, times, and locations are unambiguous (“Friday, March 6, 2026” not “this Friday”)

Canva’s Built-In Accessibility Features

Canva has added several accessibility tools — use them:

Alt Text in Canva

1. Select an image or graphic element
2. Click the “…” (More) menu on the element toolbar
3. Select “Alternative text”
4. Write a concise description (or mark as decorative)
5. This alt text carries through to some export formats (PDF)

Canva Accessibility Checker

1. Click the “Accessibility” button in the bottom toolbar (person icon)
2. Canva will flag:
   • Missing alt text on images
   • Low contrast text
   • Text that may be too small
3. Address each flagged issue before exporting

Additional Canva Features

• Color palette generator: Canva suggests palettes — always verify contrast before using
• Text spacing controls: Adjust letter and line spacing for readability
• Grid and alignment tools: Maintain consistent visual structure
• Resize (Magic Resize): When resizing for different platforms, re-check that text remains large enough and contrast is maintained

Color & Contrast

Quick Reference: UA Brand Color Contrast Ratios

Text Over Photos

If you must place text over a photograph:

1. Add a solid overlay: Use a semi-transparent rectangle (80–90% opacity) in UA Navy or white behind the text
2. Test the worst case: Check contrast against the lightest and darkest areas of the photo that show through
3. Better alternative: Use a solid color block for the text area and place the photo separately
4. Avoid: Transparent text overlays, text directly on busy images, gradient overlays that create uneven contrast

Text in Images: The Core Problem

Flyers are fundamentally images of text — and images of text are one of the biggest accessibility barriers on the web. Here’s how to handle this:

The Hierarchy of Accessible Approaches

1. Best: Native HTML/text — Send your message as a web page or email with real text. No image needed.
2. Good: Image + full text alternative — Publish the flyer image alongside a complete text version of all content.
3. Acceptable: Image with comprehensive alt text — For simple flyers (short text), provide detailed alt text that includes all the information.
4. Unacceptable: Image alone — A flyer posted as a PNG/JPG with no alt text or text alternative.

Writing Alt Text for Flyers

When a flyer is published as an image, the alt text should include all essential information, not just a description of the visual design:

Poor alt text:

“Colorful flyer for upcoming event”

Good alt text (for simple flyers):

“Spring Research Symposium. Friday, March 13, 2026, 9 AM to 4 PM. Student Union Memorial Center, Rincon Room. Open to all UA students and faculty. Register at research.arizona.edu. Contact: symposium@arizona.edu”

For complex flyers with lots of content: Alt text has practical limits (~125 characters is the guideline, though not a hard technical limit). Use alt for a brief summary and provide a linked text alternative:

<img src="spring-symposium-flyer.png" 
     alt="Spring Research Symposium — full details in text below">
<!-- Full text version follows -->

Exporting & File Formats

Format Comparison

Export Recommendations

1. For web publishing: Export as PNG + create an HTML text alternative on the same page
2. For email: Export as PNG + include all flyer text in the email body
3. For social media: Export as PNG + write all content in the post caption
4. For print: Export as PDF (Print quality) — accessibility applies to digital distribution, not physical paper
5. For attachments: Export as PDF with “Include text” option + add document title in File > Settings

Canva PDF Export Steps

1. Click Share → Download
2. Select PDF Standard or PDF Print
3. Check “Flatten PDF” — uncheck this (flattened PDFs are images, not selectable text)
4. Download and open in Adobe Acrobat to verify text is selectable
5. In Acrobat, add document title: File → Properties → Description → Title

Publishing Patterns by Channel

Email (Outlook, Gmail, Mailchimp)

Pattern: Flyer image + full text in the email body

Subject: Spring Research Symposium — March 13

[Flyer image with alt text: "Spring Research Symposium flyer — details below"]

Spring Research Symposium
Friday, March 13, 2026, 9:00 AM – 4:00 PM
Student Union Memorial Center, Rincon Room

Join us for a day of interdisciplinary research presentations...

Register: [link to registration page]
Questions: symposium@arizona.edu

Key rules:

• Never send a flyer image as the only content
• Include all text from the flyer in the email body
• Add alt text to the embedded image
• Use a descriptive subject line (not “See attached flyer”)
• For mass emails via Mailchimp or Emma, test with the preview/accessibility tools

Website / Event Pages

Pattern: Flyer image as supplementary visual + HTML content as primary

<!-- Primary content — accessible HTML -->
<article>
  <h2>Spring Research Symposium</h2>
  <p><strong>Date:</strong> Friday, March 13, 2026</p>
  <p><strong>Time:</strong> 9:00 AM – 4:00 PM</p>
  <p><strong>Location:</strong> Student Union Memorial Center, Rincon Room</p>
  <p>Join us for a day of interdisciplinary research presentations...</p>
  <a href="/register">Register Now</a>
</article>

<!-- Supplementary visual — the flyer -->
<aside>
  <img src="symposium-flyer.png" 
       alt="Spring Research Symposium promotional flyer">
</aside>

Key rules:

• The web page content should stand alone without the image
• Use semantic HTML: headings, paragraphs, lists, links
• The flyer image is supplementary — a nice visual, not the information source
• Add the flyer image in an <aside> or at the end, not as the hero

Social Media (Instagram, Facebook, X/Twitter, LinkedIn)

Pattern: Image + full content in caption + platform alt text

1. Write the caption first — include all essential information from the flyer
2. Upload the image and add alt text through the platform’s accessibility feature:
   • Instagram: Advanced Settings → Write Alt Text
   • Facebook: Edit Photo → Alternative Text
   • X/Twitter: Add description (link in image upload)
   • LinkedIn: Alt text option on image upload
3. Hashtags: Use CamelCase (#AccessibilityMatters, not #accessibilitymatters)
4. Emojis: Use sparingly; screen readers read each emoji name aloud. Place at the end, not between words.

D2L Brightspace / LMS

Pattern: Flyer as supporting visual + full HTML content in the announcement

1. Create a new Announcement or Content item
2. Write the full content in the HTML editor using headings, lists, and links
3. Insert the flyer image and add alt text through the image properties dialog
4. Do not upload a flyer image as the sole content of an announcement

Before & After Examples

Example 1: Event Announcement

Before (Inaccessible):

• Flyer posted as JPG on department website
• No alt text
• Light gray text on light blue background (2.8:1 contrast)
• Event details only in the image — no text on the page
• Date written as “Next Thursday” with no specific date

After (Accessible):

• Event details published as HTML on the web page (heading, date, time, location, description, registration link)
• Flyer image included as supplementary visual with alt text: “Wildcat Welcome event promotional flyer”
• UA Navy text on white background (14.2:1 contrast)
• Specific date: “Thursday, August 21, 2026”
• Registration link with descriptive text: “Register for Wildcat Welcome”

Example 2: Newsletter Graphic

Before (Inaccessible):

• Multi-section newsletter designed entirely in Canva
• Exported as single PNG and emailed as the entire email body
• Screen readers announce only “image” (no alt text)
• Text at 10pt equivalent — unreadable when zoomed

After (Accessible):

• Newsletter content written as HTML email with proper headings and sections
• Individual graphics used as section illustrations with alt text
• All links are real HTML links (not “click here” text baked into images)
• Font size minimum 16px; headings 20–24px

Accessibility Checklist

Use this checklist before publishing any flyer or graphic from Canva:

Design Phase

• Started from a solid background (not a busy photo)
• Information follows a logical top-to-bottom hierarchy
• Font size is 24pt+ for body text (standard flyer size)
• Font is clean and readable (sans-serif, medium/bold weight)
• Color contrast meets 4.5:1 for normal text, 3:1 for large text
• Color is not the only way to convey information
• Text over images has a solid or semi-transparent overlay
• All dates include day of week, month, date, and year
• Contact information is complete (email, phone, or URL)

In Canva

• Alt text added to meaningful images (via element menu)
• Ran Canva’s built-in accessibility checker
• Decorative elements don’t interfere with text readability
• Reading order makes sense when read top-to-bottom

Export & Publish

• Chose appropriate export format (PNG for web/social, PDF for print/attachments)
• PDF is not flattened (text is selectable)
• Added document title to PDF exports (via Acrobat)

Publishing

• Email: All flyer text repeated in the email body
• Web: HTML content is the primary information source, flyer is supplementary
• Social media: Full content in caption + platform alt text added
• LMS: Full content in announcement text + image has alt text
• Alt text for the flyer image includes all essential information (or references text below)

Common Mistakes

Resources

Guides & References

• WebAIM: Alt Text and Images
• W3C: Images and Text Alternatives
• Canva Accessibility Features
• UA Quickstart Accessibility Guidelines

Related Pages on This Site

• Color & Contrast Guidelines
• Accessible Branding — UA color contrast ratios and typography
• Accessible Documents Overview
• Writing Meaningful Link Text
• Adobe Creative Suite Accessibility — For advanced design work beyond Canva
• Social Media Accessibility

Tools

• WebAIM Contrast Checker
• Colour Contrast Analyser (desktop app)
• Who Can Use — See how colors appear to people with color vision deficiency

Need Help?

Contact accessibility@arizona.edu for guidance on accessible flyers and graphics, or request a consultation.