Amara's first flyer used pale yellow letters on a white background and a curly script font. It looked fun on her phone. But in the cafeteria, people walked right past it. Many could not read it from a few steps away, and a student with low vision could not read it at all. Accessible design means designing so that as many people as possible can read and use your text, including people with disabilities. It is not an extra. When a text is easier for some people to read, it is usually easier for everyone.
Fonts, size and visual elements
- Choose readable fonts. A sans-serif font (letters without small "feet", such as Arial or Verdana) is usually easiest to read on screens. Avoid fancy script fonts for anything longer than a few words.
- Use a big enough size. On a printed flyer, body text should be at least about 12 point, and headings much bigger. On a poster seen from a distance, go much larger.
- Limit yourself to two fonts. One for headings and one for body text. More fonts look messy and slow readers down.
- Use visual elements with a purpose. A photo, icon or simple chart should explain something, not just fill space.
- Leave white space. Empty space around text makes the important parts stand out.
Colour contrast and not relying on colour
Colour contrast is how different the text colour is from the background colour. It is measured as a ratio, from 1:1 (no difference, like white on white) up to 21:1 (black on white). The Web Content Accessibility Guidelines (WCAG) are international rules for accessible digital content. They say normal text should have a contrast ratio of at least 4.5:1, and large text (such as big headings) at least 3:1. Free online contrast checkers will calculate the ratio for any two colours.
| Text and background | About how much contrast | Meets 4.5:1 for normal text? |
|---|---|---|
| Black on white | 21:1 | Yes |
| Dark navy on white | Well above 4.5:1 | Yes |
| Medium grey (#767676) on white | About 4.5:1 | Just barely |
| Light grey (#AAAAAA) on white | About 2.3:1 | No |
| Pale yellow on white | Very low | No |
Alt text, headings, plain language and captions
- Alt text (alternative text) is a short written description of an image. Screen readers, which read a page out loud, read the alt text to people who cannot see the image. Describe what matters: "A muddy white sneaker beside the same sneaker cleaned and bright white."
- Clear headings break a text into sections and tell readers what each part is about. Use real heading styles in your document or web tool, so screen readers can jump between them.
- Plain language means short sentences, common words and an active voice. Write "Drop off your shoes on Monday" instead of "Footwear submissions will be accepted on the first business day."
- Captions on videos show the spoken words as text. They help people who are Deaf or hard of hearing, and anyone watching with the sound off.
Brand consistency and a before-and-after redesign
Your brand is how people recognize your business: its name, logo, colours, fonts and tone of voice. Brand consistency means using the same ones everywhere, on every flyer, post and slide. When customers see the same navy and white logo again and again, they start to remember Sole Revival. Pick your brand colours to pass the contrast rules from the start, so every text you make is accessible.
- Pale yellow text on white (very low contrast)
- Curly script font for all the text
- Four different fonts
- "Sold out" times shown only in red
- Long sentence: "Footwear submissions accepted Mondays"
- Photo posted online with no alt text
- Dark navy text on white (high contrast)
- Bold sans-serif heading and plain sans-serif body text
- Two fonts only
- "FULL" written next to sold-out times
- Plain language: "Drop off Monday. Pick up Wednesday."
- Alt text added to the before-and-after photo