Author | Lightnews

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 19h

Make sure your:
✅ Website works with a keyboard
✅ Buttons & menus are clear
✅ Text resizes without breaking
✅ Videos have captions

Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility

#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 19h

"𝗜𝗻𝗰𝗹𝘂𝘀𝗶𝘃𝗶𝘁𝘆 𝗶𝗻 𝗱𝗲𝘀𝗶𝗴𝗻 𝗴𝗶𝘃𝗲𝘀 𝗯𝘂𝘀𝗶𝗻𝗲𝘀𝘀𝗲𝘀 𝗮 𝗹𝗲𝗴 𝘂𝗽 𝗼𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗽𝗲𝘁𝗶𝘁𝗶𝗼𝗻."
– McKinsey & Co.

Accessible design isn’t just about compliance—it’s about reaching more customers and standing out!

#InclusiveMarketing #AccessibilityWins #DesignForAll

The text on the graphic reads, “Inclusivity in design gives businesses a leg up on the competition …”. The remaining part of the quote is in the caption. A large brown dog, sitting upright, has one paw on the top of a German Shepherd’s head. The German Shepherd is lying down and the first dog is pushing one of the Shepherd’s ears down.

1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 1d

Please:

🔹 Use labels, icons, or patterns alongside colour.

🔹 Test designs in greyscale to check readability.

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 1d

𝗖𝗼𝗹𝗼𝘂𝗿 𝗮𝗹𝗼𝗻𝗲 𝗶𝘀𝗻’𝘁 𝗲𝗻𝗼𝘂𝗴𝗵 to communicate meaning.

1 in 12 men & 1 in 200 women have colour blindness—including my husband. He can often find clues that help, but sometimes, he can miss things.

Have you ever struggled with colour-based info?

#AccessibleDesign #InclusiveGraphics #VisibilityMatters

Heading: Don't Rely on Colour Alone
Sub-heading: Use patterns, labels, or icons alongside colour to convey meaning
Example 1: A red dot and a green dot with the text next to them that says, "Not inclusive or accessible"
Example 2: A red dot with a white X and a green dot with a white tick. The text next to them says, "A better option"
A white dog, with a happy expression, looks towards the camera. For some he may be difficult to see though, he may fade into the pale grey and white background.

1 1 1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 3d

Justified text can be particularly difficult for those with dyslexia and other vision impairments to read due to the varying distances between text and visual "rivers" that can be formed with the spaces.

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 3d

𝗞𝗲𝗲𝗽 𝗧𝗲𝘅𝘁 𝗟𝗲𝗳𝘁-𝗔𝗹𝗶𝗴𝗻𝗲𝗱

I preferred justified text; it looks so neat, but it can be harder to read.

🔹 Uneven spaces = disrupted reading flow.
🔹 Left-aligned text is easiest for most people.

Align left and help your audience read with ease!

#ReadableText #TypographyMatters #AccessibilityDesign

Heading: "Keep Text Left-Aligned"
Sub-heading: Especially for people with dyslexia, it's easiest to read
Then a paragraph of text that has been justified and shows uneven spacing between words says, "Justified text can be particularly difficult for those with dyslexia and other vision impairments to read due to the varying distances between text and visual "rivers" that can be formed with the spaces."

1 1 1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 7d

Make sure your:
✅ Website works with a keyboard
✅ Buttons & menus are clear
✅ Text resizes without breaking
✅ Videos have captions

Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility

#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 7d

"𝗜𝗻𝗰𝗹𝘂𝘀𝗶𝘃𝗶𝘁𝘆 𝗶𝗻 𝗱𝗲𝘀𝗶𝗴𝗻 𝗴𝗶𝘃𝗲𝘀 𝗯𝘂𝘀𝗶𝗻𝗲𝘀𝘀𝗲𝘀 𝗮 𝗹𝗲𝗴 𝘂𝗽 𝗼𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗽𝗲𝘁𝗶𝘁𝗶𝗼𝗻."
– McKinsey & Co.

Accessible design isn’t just about compliance—it’s about reaching more customers and standing out!

#InclusiveMarketing #AccessibilityWins #DesignForAll

1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 8d

𝗟𝗶𝗻𝗲 𝗦𝗽𝗮𝗰𝗶𝗻𝗴:
Don't underestimate the importance of getting this right.

🔹 Use 1.5x line spacing for body text.

🔹 Avoid cramped text—it slows reading.

🔹 Better spacing = better comprehension.

#TypographyMatters #ReadableDesign #AccessibilityTips

Heading: “Line Spacing”
Sub-heading: “Using at least 1.5 times spacing improves readability"
Below is an example of a paragraph with 1.5 times spacing, with a green tick above it, then an example of a paragraph where the lines of text are too close together, with a red cross above it. The text in the paragraphs is used in the example paragraphs.
In the bottom right corner of the graphic, a tan-coloured spaniel-type dog wearing reading glasses seems annoyed.

1 1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 10d

𝗣𝗟𝗘𝗔𝗦𝗘 𝗦𝗧𝗢𝗣 𝗨𝗦𝗜𝗡𝗚 𝗔𝗟𝗟 𝗖𝗔𝗣𝗦.

𝗜𝗧’𝗦 𝗛𝗔𝗥𝗗 𝗧𝗢 𝗥𝗘𝗔𝗗 𝗔𝗡𝗗 𝗟𝗢𝗢𝗞𝗦 𝗟𝗜𝗞𝗘 𝗬𝗢𝗨'𝗥𝗘 𝗦𝗛𝗢𝗨𝗧𝗜𝗡𝗚!

Using all capital letters can slow reading and can confuse screen readers.

🔹 Words lose their shape.
🔹 It can look aggressive.
🔹 Use bold or colour instead.

#ReadableText #AccessibilityMatters #DesignTips

A black and white dog looks towards the camera with its head turned slightly away. The dog is wearing a baseball cap backwards. The text in the graphic is repeated in the caption, plus gives an example of two lines of text that are difficult to read when entirely in capital letters.

1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 14d

Make sure your:
✅ Website works with a keyboard
✅ Buttons & menus are clear
✅ Text resizes without breaking
✅ Videos have captions

Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility

#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 14d

"𝗜𝗻𝗰𝗹𝘂𝘀𝗶𝘃𝗶𝘁𝘆 𝗶𝗻 𝗱𝗲𝘀𝗶𝗴𝗻 𝗴𝗶𝘃𝗲𝘀 𝗯𝘂𝘀𝗶𝗻𝗲𝘀𝘀𝗲𝘀 𝗮 𝗹𝗲𝗴 𝘂𝗽 𝗼𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗽𝗲𝘁𝗶𝘁𝗶𝗼𝗻."
– McKinsey & Co.

Accessible design isn’t just about compliance—it’s about reaching more customers and standing out!

#InclusiveMarketing #AccessibilityWins #DesignForAll

1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 15d

𝗥𝗲𝗮𝗱𝗮𝗯𝗹𝗲 𝗙𝗼𝗻𝘁𝘀

Some fonts are gorgeous, but if people can’t read them, then what’s the point? 🤷‍♀️

🔹 Stick to sans-serif fonts for digital content.
🔹 Save decorative fonts for accents.
🔹 Make sure the spacing isn’t too tight or too loose.

#FontMatters #ReadableDesign #TypographyTips

A Rottweiler-looking dog looks towards the camera, tongue out, with a straw hat covering one ear and his eyes. The text in the graphic is repeated in the caption plus demonstrates a good, simple font choice that’s easy to read and a script font that’s not easy to read.

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 17d

Small text isn’t clever, it’s a readability nightmare.

🔹 Web: At least 16px
🔹 Print: At least 12pt
🔹 Bigger is better (esp. for mobile users)

Small text = lost customers. Make it easy for people to read your social graphic, website, flyer or book.

#SizeMatters #InclusiveDesign #MarketingTips

A Great Dane (dog) peers down at a very small Chihuahua-looking dog. The text on the graphic is repeated in the caption

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 21d

Make sure your:
✅ Website works with a keyboard
✅ Buttons & menus are clear
✅ Text resizes without breaking
✅ Videos have captions

Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility

#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 21d

"𝗜𝗻𝗰𝗹𝘂𝘀𝗶𝘃𝗶𝘁𝘆 𝗶𝗻 𝗱𝗲𝘀𝗶𝗴𝗻 𝗴𝗶𝘃𝗲𝘀 𝗯𝘂𝘀𝗶𝗻𝗲𝘀𝘀𝗲𝘀 𝗮 𝗹𝗲𝗴 𝘂𝗽 𝗼𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗽𝗲𝘁𝗶𝘁𝗶𝗼𝗻."
– McKinsey & Co.

Accessible design isn’t just about compliance—it’s about reaching more customers and standing out!

#InclusiveMarketing #AccessibilityWins #DesignForAll

1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 22d

Want to fix it?

✅ Use high contrast between text & background.
✅ Check colours with a contrast checker.

Simple? Yes.
Important? VERY.

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 22d

𝗖𝗼𝗻𝘁𝗿𝗮𝘀𝘁 𝗺𝗮𝘁𝘁𝗲𝗿𝘀
People can’t read what they can’t see.
If your audience has to squint, that’s not good design.
Low contrast = low engagement.

#AccessibleDesign #MarketingTips #SmallBusinessAustralia

The image demonstrates text on a background with high contrast and text on a background with low contrast. There is a black and white Greyhound off to the side with their head tilted. The text in the graphic is repeated in the caption.

1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 24d

𝗨𝘀𝗲:
✔ Download the Guide
✔ Sign up for the Newsletter

Are vague buttons becoming more common, or is it just me?

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 24d

𝗨𝘀𝗲 𝗗𝗲𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝘃𝗲 𝗕𝘂𝘁𝘁𝗼𝗻𝘀

Hate to break it to you, but "Click here" doesn’t cut it! Vague button text can confuse users, create accessibility barriers, and even impact SEO.

𝗗𝗼𝗻'𝘁 𝘂𝘀𝗲:
🚫 Click here
🚫 More info

𝗜𝗻𝘀𝘁𝗲𝗮𝗱:
See below 👇

#AccessibleWeb #ClearUX #InclusiveDesign

Heading: Use Descriptive Button Text
Sub-heading: Make sure button text is descriptive - no vague "Click Here"
Example 1:
A button with the text reading, "Submit". It has a red cross above it.
Example 2:
A button with the text reading, "Click to Submit Details". It has a green tick above it.
A large brown dog looks on with a perplexed look on his face.

1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 28d

Make sure your:
✅ Website works with a keyboard
✅ Buttons & menus are clear
✅ Text resizes without breaking
✅ Videos have captions

Not sure where to start? Grab my FREE guide: subscribepage.io/3-Quick-Wins-SocialMediaAccessibility

#SmartBusiness #UXMatters #AltTextMatters #CaptionYourVideos

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 28d

"𝗜𝗻𝗰𝗹𝘂𝘀𝗶𝘃𝗶𝘁𝘆 𝗶𝗻 𝗱𝗲𝘀𝗶𝗴𝗻 𝗴𝗶𝘃𝗲𝘀 𝗯𝘂𝘀𝗶𝗻𝗲𝘀𝘀𝗲𝘀 𝗮 𝗹𝗲𝗴 𝘂𝗽 𝗼𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗽𝗲𝘁𝗶𝘁𝗶𝗼𝗻."
– McKinsey & Co.

Accessible design isn’t just about compliance—it’s about reaching more customers and standing out!

#InclusiveMarketing #AccessibilityWins #DesignForAll

1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 29d

Accessibility isn’t just about convenience—it’s about safety.

Do you prefer smooth animations or minimal motion?

Caryn | Firefly Graphics @fireflygraphics.bsky.social · 29d

𝗔𝘃𝗼𝗶𝗱 𝗠𝗼𝘃𝗶𝗻𝗴 𝗼𝗿 𝗙𝗹𝗮𝘀𝗵𝗶𝗻𝗴 𝗧𝗲𝘅𝘁

⚠️ Flashing content can be unsafe for some users.

🔹 Avoid animations that flash over 3 times per second.
🔹 Fast flashes can trigger seizures.
🔹 Use smooth animations instead.

#SafeDesign #AccessibilityMatters #UserFriendlyContent

The text in the graphic is repeated in the caption.nA pug dog looks towards the text in the graphic; it's wearing dark sunglasses.n

1 1

Caryn | Firefly Graphics @fireflygraphics.bsky.social · Sep 25

Sure did! It's a visual explanation of what I'm talking about. 🙂