The Golden Rule: Use "Real Text" & Structure
Whenever possible, use actual HTML text rather than text embedded inside an image (JPG/PNG). If you must use an image of text, you must repeat the full text in the Alt Text or the surrounding body copy. Beyond being "real," text must also be structured using semantic tags.
Why "Flattened" Text is a Barrier
- Screen Readers are Blind: Assistive technology sees a file name, not the pixel-based information.
- Pixelation on Zoom: When low-vision users zoom to 200%, images blur. CSS/HTML text remains crisp.
- Hierarchy is Lost: Without Text Semantics, a screen reader cannot tell the difference between a title and a footnote.
Design-Specific Compliance
Before finalizing any design, utilize Canva’s Design Accessibility Checker to verify contrast and readability.
1. Color Contrast (4.5:1)
Standard text must meet a 4.5:1 contrast ratio. For large text (18pt+), the ratio is 3:1.
Tip: Review Canva's Accessibility Site for updated contrast-friendly templates.
2. Text Semantics (Hierarchy)
Do not rely on bolding or font size alone to indicate a heading. Use the Position > Advanced menu in Canva to assign H1, H2, or Body tags to your text boxes.
Why: This allows screen reader users to skip to the sections they need rather than reading the whole page.
3. Image Alt Text
All non-decorative elements require descriptive text. Learn to create and edit alt text directly within Canva.
Tip: In social media posts, repeat your alt text in the caption for better reach.
4. PDF Tagging
When exporting, ensure "Accessibility (tags for screen readers)" is toggled ON. This preserves the semantics and reading order you established in the design phase.
Common Design Scenarios
Scenario: Social Media Flyers
The Trap: Posting a Canva flyer with no text description.
The Fix: The post caption MUST include the Who, What, Where, When, and RSVP link. Follow these Canva Accessibility Tips for creating inclusive social graphics.
Scenario: Educational Lessons
The Fix: For digital course materials, complete the Canva: Accessible Design Lesson to learn how to structure content for different learning needs.
Brand & Color Accessibility
Ensuring sufficient contrast between text and other visual elements is essential for improving the accessibility of content, particularly for individuals with visual impairments. This is especially important in web-based communications, due to the significance of contrast ratios. Use high-contrast color combinations between text and background. The Web Content Accessibility Guidelines specifies contrast ratios for text based on its size and weight. For standard text, a contrast ratio of at least 4.5:1 is recommended. Tools like WebAIM provide a contrast checker to compute contrast ratios.
What "4.5:1 Contrast" Actually Means
The Contrast Ratio is a mathematical score (1:1 to 21:1) that measures how easily text stands out from its background.
The Legal Rule: To meet WCAG 2.1 AA standards, standard text must score at least 4.5:1. This ensures readability for users with low vision, color blindness, or aging eyes.
Contrast Score Examples
| Score | Visual Example | Verdict |
|---|---|---|
| 21.0:1 | Black Text on White | ✅ PASS |
| 8.5:1 | FSU Garnet on White | ✅ PASS |
| 4.5:1 | Dark Gray on White | ✅ PASS (Minimum) |
| 3.0:1 | FSU Gold on White | ❌ FAIL |
How to Fix a Contrast "Fail"
If your brand colors fail the 4.5:1 test, try these three adjustments:
1. Darken the Text
Slide your color picker darker until it reaches a 4.5:1 score.2. Flip the Background
Place light text (Gold) on a dark background (Garnet or Black) instead of white.3. Increase Size
If text is "Large" (18pt+), the requirement drops to 3:1.Color Accessibility
FSU is committed to being accessible for all. This includes the way we use our colors in our products and materials. Below is a chart intended to show how colors can be combined to ensure that our materials are accessible while fitting within the university’s brand.
| Background Color | Black Text | White Text | FSU Garnet Text | FSU Gold Text |
|---|---|---|---|---|
| FSU Garnet #782F40 |  |
 |
|
 |
| FSU Gold #CEB888 | |
|
|
|
| White #FFFFFF | |
|
|
|
| Stadium Night #101820 | |
|
|
|
| Plaza Brick #572932 | |
|
|
|
| Gulf Sands#DFD1A7 | |
|
|
|
| Legacy Blue #425563 | |
|
|
|
| Westcott Water #5CB8B2 | |
|
|
|
| Vault Garnet #A6192E | |
|
|
|
| Vault Gold #FFC72C | |
|
|
|
|
|
||||