Work Kits
Designing Accessibility
into Brand Boards
A Playbook
Welcome to this
Creatives playbook
This website and the accompanying templates walk you through the process of creating accessible brand boards.
1
Scroll down
For content on why and how to create brand
boards that emphasize design accessibility
2
Learn by doing
Follow along and open the attached brand board template. You’ll have an inclusive brand board ready to go by the end!
3
Get the TL;DR
Scan the checklist at the end to get the summary
of all the information you’ve learned
4
Set the pace
Jump to sections, return to the work kit, or come back
the playbook later, using the handy navigation bars.
Why brand boards should be accessible
Design accessibility enables companies to create relatable and marketable brands for people across different abilities.
It places the organization at the forefront of innovation since it values improving user experience for all.
Photo from Peter Macdiarmid / Getty Images
“The power of the
Web is in its universality.
Access by everyone, regardless of disability,
is an essential aspect.”
Tim Berners-Lee,
Inventor of the World Wide Web
Design Accessibility
Design accessibility involves considering the diverse abilities of one’s audience so everyone has equal access to visual information.
Design accessibility helps professionals develop designs that are easy to comprehend
and use. Key aspects of accessible design include, but aren't limited to, color, typography, and layouts.
Examples of design accessibility could be creating high-contrast designs for visually impaired individuals and providing alternative text for screen readers. Accessible designs recognize the needs of individuals who may find complex layouts, fast motion, and bulk
texts difficult to process. It also considers those with poor internet connection or a lack
of necessary devices.
Web Content Accessibility Guide (WCAG). What is it?
The WCAG sets the international standard for making web content accessible to people with disabilities. While the information that the WCAG provides is primarily for folks in web development, its content also serves as a reliable guide for anyone who uploads information online.
Brand Board Templates
Get creative with these ready-made brand boards and update them with your own brand identity.
Looking for more templates?
Check out a range of high-quality brand board templates, conveniently housed in Canva’s library.
Anatomy of a Brand Board
Logo
Color Palette
Fonts
Elements
Applications
Keep a template open in a separate tab and build a brand
board step by step as you read through this playbook.
Checking your logo
Before creating a brand board, let’s evaluate logos. Considering accessibility in logos ensures that everyone can recognize and interact with the brand. Accessible logos reach a wider audience as they take into account those who use assistive technologies or have limited internet access.
Best Practices
1
Large Text and Contrasting Colors.
Aside from being more memorable,
logos with good contrast and bold
text are more easily decipherable.
3
Scalability. Make sure the quality
of your logo does not change when
it's resized. Having consistency in
your visual identity is important.
2
Keep it simple. Complex design logos
may be challenging for audiences to understand, especially at first glance.
4
Alt Text. When posting your logo online, make sure your brand is still accessible to those who use assistive technologies.
From ‘Nope’ to ‘Nice’ to ‘Next Level’
Brimton academy
Avoid fonts that are blurry and can be difficult to read
Brimton
Academy
Choose colors that have good contrast and stand out from each other
Brimton
Academy
Use the appropriate colors and typeface for consistency and legibility
Recommended Resources
Whether you have a logo already or not, Canva’s got you covered.
See it in action
The main logo includes all image
and text information about the brand
Have visual consistency among your alternative logos so they’re recognizable even if some elements are not present
Building Brand Boards
As we know, a brand board is a visual guide that breaks down the specifics of your brand's identity. It helps enhance brand recognition and deliver a company’s message with consistency across various platforms. But do you know what it takes to create brand boards that value accessibility?
Choosing Colors
Colors are crucial in design accessibility. Aside from reinforcing one’s branding and setting the vibe for audiences, colors convey and highlight important information, improve text legibility, and enhance user navigation.
Best Practices
1
Contrast. High contrast between text and
background enables people to see things better. Beware that overly bright colors or poor combinations cause confusion and visual discomfort.
2
User Navigation. Aside from colors, always use ticks, arrows, crosses, and other icons to direct users and prompt an action. This enables people, who have color vision deficiency, to navigate design.
From ‘Nope’ to ‘Nice’ to ‘Next Level’
Aa
Red text on pink background is not easy
to read
Aa
Good contrast between text and background is recommended
Aa
High contrast between colors makes your brand easy to recognize
See it in action
The primary palette features the brand colors you use the most
Have secondary colors that support and add variety to the primary palette
Recommended Resources
Know more about accessible colors by clicking on this Color Contrast Checker
Typography Matters
Accessibility in typography is important since it ensures that copy can reach those who need it, regardless of their disabilities. In this section, we consider things such as text size, spacing, font styles, and font combinations so content can be easily understood.
Today's Agenda
Introduction to the Session
Pitch Deck
For Quarter 3 and Quarter 4
Aa
Who
We
Are
Best Practices
1
Consider a font's family. Avoid fonts that can make it difficult to distinguish between i, I, l, and 1. The same goes for 0, o, and O or the u, v, U, and V.
2
Flexible yet consistent. Choose a font
that can still be easily read when resized or in different spacing or format (like bold).
3
Size and weight. Appropriate font size
and weight make for comfortable reading. Keep in mind the use, context, and the surface where the text will be read.
4
Let it breathe. Provide enough space between characters and lines so the
text isn’t visually overwhelming. Avoid
fonts that have tight letter spacing
(ex. “barn” can be misread as “bam”).
5
Keep it simple. Avoid excessively stylized or script fonts. Italicized, thin, underlined, or lightweight fonts may also be difficult to read.
6
Clear layout. Have a clear visual hierarchy. If you use a second font to distinguish headers from body text, make sure these combinations complement each other. Moreover, avoid centered or justified blocks of text since they may be difficult to read.
From ‘Nope’ to ‘Nice’ to ‘Next Level’
design brief
Overly stylized fonts may not be easily understandable to audiences
design brief
Be aware of the space between characters to help readers make sense of the text
design brief
Prioritize the readability of the text over unique and exciting typefaces
How to use our Logo
Avoid fonts that are so lightweight that they’re difficult to read
How to use our Logo
Make sure your font size and weight make the text easy to understand
How to use our Logo
Using bold fonts, especially for headers, help readers see text more clearly
Some Canva Tools For You
Canva has resources you can check out for typography matters
See it in action
Stick to non-decorative fonts and
complementary combinations
Have a clear visual hierarchy
The font family uses appropriate spacing and non-similar characters
Elements (Photos, Videos, Illustrations, and More)
Some Best Practices
1
Contrast is your friend. High-contrast visuals in your design are easier to understand and interpret.
6
Avoid Auto-play. This can be disorienting and stressful for users. Provide them the option to play videos or audio.
2
Alt Text. Describe key visuals through audio or text. Additionally, type out the copy so screen readers can access them; don’t upload pictures of text.
7
Avoid Flashing GIFs. GIFs and other visuals with motion that flash more than three times per second could induce seizures.
3
Imagery & Text.
If you have visuals that combine imagery with text, prioritize the readability of the copy over the image.
8
Captions and Transcripts. Add captions for all media containing audio. It’s also good to provide transcripts separately.
4
Clear Visual Hierarchy. Guide the audience’s eyes to the most important parts of the visuals first so the flow of content is coherent.
9
Too much information on the screen all at once can be difficult to process. Space out images, text, and other visuals to allow audiences room to understand.
5
Thumbnails should provide an accurate representation of the
content. Avoid misleading audiences.
10
Visual Representation Matters. Show individuals of various cultures, races, ages, genders, sizes, and abilities, in your visuals. Browse the Elements tab for diverse options.
Canva’s Elements Tab. On the editor, browse the elements tab for various options for your design.
Find graphics, photos, videos, and more.
A Canva Tool for You
If you’re writing alt text for the first time or if you need a refresher, click on the link to get started!
Brand Applications:
Putting It All Together
Brand applications show the intended designed output so you can visualize the product once it's complete. This allows designers to see how all the colors, typography, layouts, and other design elements come together before the final look is approved.
Digital Applications
Instagram Story
Facebook Post
TikTok Video
Print Applications
Tote Bag
Poster
Sticker
Canva Tools For You
On the Canva editor,
go to “Apps” and search for “Mockups.” Choose any of the options so you can visualize your brand identity better.
Once you’ve finished
your brand board, go to File > Settings > Check design accessibility. See if there are remaining issues with fonts, color, alt text, and links.
See it in action
Logo, text, colors, and images come together to make a social media post
Consistency in logo
Good visual hierarchy and
use of font combinations
Final Checklist
Logo
Simplicity is key. Make sure the logo uses good contrast and readable text.
Colors
Avoid overly bright colors or poor combinations, which can cause confusion and visual discomfort.
Fonts
Appropriate sizing and spacing are
your friends. Remember to check a font’s
family and avoid similar-looking characters.
Elements
Show a diverse range of individuals. Remember to consider the needs of those who use assistive technologies. Avoid flashes and auto-play features.
Brand Applications
Put everything together and see your brand in different applications. Use Canva’s feature to check for design accessibility issues.
What will you design today?
Design anything and everything with Canva! With an endless world
of visual content in your hands, find all that you need to start inspired.