Designing For Users With Visual Impairments

1 in 12 men can’t see your design. And you’re still using red for errors. There’s a real chance your user can’t distinguish between your success green and error red. Yet most design teams still treat colour blindness like an edge case. It’s not. Here’s the simplified breakdown every designer should know: 1. Red-Green (Deuteranopia & Protanopia) - 1st Priority Affects ~8% of men, ~0.5% women. Users struggle to distinguish: • Red vs green. • Brown vs green. • Orange vs red. What to do: • Never rely on red/green alone for success and error states. • Pair every status with text and an icon (✓ ✗ ⚠). • Ensure colours differ in brightness and contrast, not just hue. • Meet contrast requirements: 4.5:1 for text, 3:1 for UI components. If you only fix one thing, fix this. 2. Blue-Yellow (Tritanopia) - 2nd Priority Very rare (~0.01%), but still worth checking. Users struggle with: • Blue vs yellow. • Blue vs green. • Purple vs red. What to do: • Avoid pairing blue/yellow for critical states. • Don’t rely on blue vs green to indicate meaning. • Add icons and text to “info,” “warning,” and “alert” states. • Maintain strong brightness contrast. Red/green works fine here. 3. Monochromacy - 3rd Priority Extremely rare. Users see only in grayscale (no colour perception). What to do: • Rely on contrast, not hue. • Use text labels, icons, patterns or structural differences. • Never use colour as the only indicator for meaning. If your design works in grayscale, you’ve already covered this. Here's a guide your team can use: ✅ DO • Add icons or labels to all colour-coded states. • Use contrast differences ; at least 4.5:1 for text, 3:1 for UI components. • Test with simulators (Stark, Colorblind, Who Can Use). • Ask yourself: “Does this work in grayscale?” ❌ DON’T • Use colour as the only indicator. • Rely on red/green for critical actions. • Skip accessibility testing. 👇🏽 What’s your experience with colour blindness? Drop your thoughts in the comments. ♻️ Share and save this for your team. --- ✉️ Subscribe to my newsletter for accessibility and design insights here: https://lnkd.in/gZpAzWSu --- Accessibility note: Contents in the image attached contain normal and large text ratios for WCAG 2.2 AA only.

Happy Global Accessibility Awareness Day everyone! It's a great day to remind people, that, accessibility is the responsibility of the whole team, including designers! A couple of things designers can do: - Use sufficient color contrast (text + UI elements) and don’t rely on color alone to convey meaning. - Ensure readable typography: support text resizing, avoid hard-to-read styles, maintain hierarchy. - Make links and buttons clear and distinguishable (label, size, states). - Design accessible forms: clear labels, error help, no duplicate input, document states. - Support keyboard navigation: tab order, skip links, focus indicators, keyboard interaction. - Structure content with headings and landmarks: use proper H1–Hn, semantic order, regions. - Provide text alternatives for images, icons, audio, and video. - Avoid motion triggers: respect reduced motion settings, allow pause on auto-play. - Design with flexibility: support orientation change, allow text selection, avoid fixed-height elements. - Document accessibly and communicate: annotate designs, collaborate with devs, QA, and content teams. Need to learn more? I got a couple of resources on my blog: - A Designer’s Guide to Documenting Accessibility & User Interactions: https://lnkd.in/eUh8Jvvn - How to check and document design accessibility in your mockups: a conference on how to use Figma plugins and annotation kits to shift accessibility left https://lnkd.in/eu8YuWyF - Accessibility for designer: where do I start? Articles, resources, checklists, tools, plugins, and books to design accessible products https://lnkd.in/ejeC_QpH - Neurodiversity and UX: Essential Resources for Cognitive Accessibility, Guidelines to understand and design for Dyslexia, Dyscalculia, Autism and ADHD https://lnkd.in/efXaRwgF - Color accessibility: tools and resources to help you design inclusive products https://lnkd.in/dRrwFJ5 #Accessibility #ShiftLeft #GAAD

That "clean, minimal" form design you're proud of? Some of your users can't see it at all. Light gray borders on white backgrounds. Subtle focus indicators. Ghost buttons with barely-there outlines. These design choices look sleek to you, but they're completely invisible to people with low vision, color blindness, or anyone squinting at their phone in bright sunlight. WCAG 1.4.11 (Non-text Contrast) exists because if someone can't see where to click, focus, or type, your design isn't minimal - it's missing. This carousel breaks down what non-text contrast actually means, who it helps, and how to fix it without abandoning your aesthetic. #Accessibility #WCAG #WebDesign #UXDesign If you prefer your content as text, read on: Is your 'minimal design' actually invisible? What is WCAG 1.4.11? User interface components and graphical objects need enough contrast against their background. This includes: form inputs, buttons, focus indicators, icons, and charts and graphs. All should have at least a 3:1 contrast ratio. Why it matters This guideline helps people with low vision and color blindness who need stronger visual cues to identify what's interactive. Anyone using a screen in bright sunlight, working on a budget laptop with a dim display, or dealing with aging eyes benefits from better contrast. Common Mistakes • Barely-there borders on form fields (the #1 offender) • Subtle focus indicators that blend in • Ghost buttons with low contrast borders • Icons that almost match the background These patterns might look 'clean' to you, but they're invisible to some users. If people can't find where to click, focus, or type, your design isn't minimal - it's missing. What doesn't need 3:1 contrast? • Inactive or disabled components don't need 3:1 contrast • Decorative graphics and text get a pass, too. • Logos are exempt (but it's still preferable to ensure your logo can be seen by as many people as possible) Make your UI visible • Darken borders, outlines, and icon colors to at least 3:1 against the background • Ensure visual focus indicators have contrast against both the background and the element they're highlighting • Test in grayscale to catch issues your eyes might miss in color Testing • Use browser dev tools to check colors • Search the web for an accessible contrast checker • Test with real users, automated tools can miss issues • Remember to check different states: default, hover, focus, active The bottom line If sighted people can't see your UI, they can't use it. Non-text contrast is about making sure everyone can interact with what you build. Start with your most-used components. Fix forms, buttons, and focus states first. Learn more Want more clear and actionable WCAG breakdowns? Check out wcagInPlainEnglish.com

If you’re new to the complexities of color accessibility standards — like I was at the start of this project — here’s a distilled cheat sheet that can help you make the most of our new tool in Figma. We know this can be a bit daunting at first, so we put a lot of care into this feature, trying to make it as simple as possible for you. Whether you’re brand new to this concept, or a seasoned a11y pro, you can start leveraging this right away. Here are the basics: → Strong color contrast makes your designs more inclusive by improving readability for users with visual impairments. → A contrast ratio is simply the foreground compared to the background, the higher the number, the higher the contrast, the more inclusive it is. This ratio is automatically calculated in real-time and displayed in the top left corner of the color picker. → We built everything using the WCAG 2.2 standard, which is widely accepted and most commonly used. That standard has categories and levels defined, which are available to you in the settings menu. → Figma will automatically detect the appropriate category of the layer you have selected, but you can override this if you need to from the settings menu. → Level AA is good for most projects, and is the Figma default. → Level AAA is considered above and beyond, and is good for projects that have enhanced needs. → Large text is considered at least 24px or Bold 19px. → Normal text is considered below 24px or Bold 19px. → Graphics are considered icons, controls, and other elements that have meaning. (BTW Level AAA does not exist for this category, so if you see your level changing on you, this is probably why.) → You’ll see AA or AAA in the top right corner, alongside a pass/fail icon. This is your stable place to find the status at any point. → You’ll see a pass/fail boundary line on the color spectrum, use this as a visual aid to choose a color that meets your goals. → You’ll also see a dotted pattern on the color spectrum, this is the fail zone. If your color is in this area, you can click on the fail indicator in the top right corner to auto-correct it to the nearest passing color. → If you need to know the background color that was auto-detected, click the contrast ratio in the top left corner to open a flyout with more color info. We blend together any transparent background elements as well, so this value may be technically undefined in your file, but we’ve done it this way to be as accurate as possible to what you see on the canvas. → In more complex layer structures (such as overlapping elements), or complex color scenarios (such as multiple colors, gradients, or images), the calculations may not be possible. If you find that’s the case for your design, we recommend duplicating and isolating the foreground and background elements you want to evaluate onto a clean part of the canvas. Let us know if you have questions, and happy contrasting!

👩🦰 Persona Spectrum For Inclusive Design (Figma Kit) (https://lnkd.in/eGD38hs4), a wonderful little accessibility tool for designers to include permanent, temporary and situational contexts in design decisions. Open sources, with all illustrations and assets for presentations and print. By 🐝 Mahana Delacour. --- 🔶 1. Accessibility ≠ Compliance We should never rely on automated accessibility testing alone to “ensure” accessibility. Compliance means that a user can use your product, but it doesn’t mean that it’s a great user experience. Manual testing makes sure that your users actually can meet their goals in their own context. It often feels daunting to get started, but small first steps are a great beginning. First, gather people interested in accessibility. Document what research was done, where the gaps are. And then try to include 5–12 users with disabilities in a dedicated accessibility testing. One way to find participants is to reach out to local chapters, local training centers, non-profits and public communities of users with disabilities in your country. You might want to add extra $25–$50 depending on disability transportation. Once you have access to users, run a small accessibility initiative around key flows in your products. Tap into critical touch points and research them. Eventually extend to components, patterns, flows, service design. A good target is to incorporate inclusive sampling into all research projects — at least 15% of usability testers should have a permanent, temporary or situational disability. --- 🔹 2. Building Accessibility Research From Scratch If you’d like to get started, I highly recommend to check “How We’ve Built Accessibility Research at Booking.com” (https://lnkd.in/eq_3zSPJ), a fantastic case study by Maya Alvarado on how to build accessibility practices and inclusive design into UX research from scratch. Maya highlights the idea of extending Microsoft's Inclusive Design Toolkit (https://lnkd.in/eN5J7EkJ) to meet specific user needs of a product. It adds a different dimension to disability considerations which might be less abstract and much easier to relate for the entire organization. And as Maya noted, inclusive design is about building a door that can be opened by anyone and lets everyone in. Accessibility isn’t a checklist — it’s a practice that goes way beyond compliance. A practice that involves actual people with actual disabilities throughout all UX research activities. More resources in the comments ↓

Eye-Opening Packaging. Packaging design often revolves around what we see - vibrant colours, bold shapes, and logos that pop off the shelves. But what happens when sight isn't part of the equation? For millions of visually impaired individuals, packaging becomes an obstacle, making something as basic as grocery shopping unnecessarily difficult. While pharmaceutical packaging has made strides in including Braille, most consumer goods still leave visually impaired consumers in the dark - both literally and figuratively. Brands are missing a huge opportunity by not designing more inclusively. Focusing only on average consumers excludes a significant portion of the population. Alexandra Burling's project Colour Me Blind challenges this oversight. Her work takes a sensory-driven approach to packaging, tapping into touch and sound, proving that inclusive design can be both practical and appealing. Her approach goes beyond simply adding Braille to products like milk, cornflakes, and canned tomatoes. Instead, she creates packaging that encourages people to engage with products through multiple senses. Textures and tactile instructions make identifying and using everyday items far more intuitive for the visually impaired. Her deep dive into this world wasn't just theoretical. Burling interviewed blind individuals and even lived in the dark to understand the challenges faced when interacting with traditional packaging. The result is packaging that empowers, offering a richer sensory experience that supports independence. At her graduation exhibition, Burling brought this concept to life with a mini-supermarket where visitors could feel the packaging in total darkness. Imagine picking up a milk carton and recognising it not by sight, but by the textures under your fingertips, or hearing the beeping sounds of a cash register in the background, simulating a real shopping environment. With over 2 million visually impaired individuals in the UK alone, the fact that most packaging still doesn't accommodate their needs is a massive blind spot. Colour Me Blind shows that packaging design doesn't need to compromise between beauty and function. It can be both. And as technology continues to evolve, the excuses for not implementing Braille or tactile elements in packaging design are running out fast. We've seen legislation drive change in pharmaceuticals, but when it comes to consumer goods, there's still a long way to go. Burling's work makes it clear - it's time for regulations, conversations, and action to catch up. Packaging needs to move beyond being visually appealing to becoming universally accessible. Let's stop designing only for those who can see and start creating for everyone. Now that's a vision we can all get behind. Agree? 📷Alexandra Burling

Spend 3 minutes here. It can instantly make your designs inclusive for millions. Most designers do not realize this… Their UI looks perfect. Colors look beautiful. Everything feels professional. Yet some users struggle silently. They cannot read the chart. They miss the error state. They misunderstand the interface. Not because they lack skill. Because the design ignored their vision. I learned this the hard way. At first, I focused on aesthetics. Palette harmony. Brand consistency. Visual appeal. Important, yes. But incomplete. Because design is not decoration. It is communication. And color alone often fails. That realization changed how I design. How I review products. How I build systems. This infographic breaks that journey down. Simple. Practical. Actionable. If you go through it, you will: Understand how color-blind users actually perceive designs. Strengthen accessibility across your design system. Learn which color choices cause usability failures. Improve charts, data visuals, and UI clarity. Create products ready for the future. Build safer palettes from the start. Not just beautiful. Truly inclusive. Because inclusive design is smart design. Better usability. Wider reach. Stronger trust. And honestly, better business too. So tell me honestly. Have you ever checked your designs through a color blind simulation? PS: If yes, what surprised you most?

One of the best dashboards that I saw this weekend was this Tableau Accessibility Dashboard with Best Practices by Keren Aharon, highlighting: - Clear side by side comparisons that show exactly why contrast matters - Simple, practical palettes that are friendly for users with visual impairments - Straightforward examples of how labels, language, and charts can shift from confusing to accessible - A thoughtful mix of visuals that demonstrates how inclusive design looks in real scenarios What I like about this one is how it feels like a guide rather than just a dashboard. It gives the #datafam a set of easy wins for improving accessibility, and the examples make the concepts stick. It is the kind of resource people save because it actually teaches something useful. Beautiful work, Keren!

Explainability is not accessibility. We keep building glass boxes only engineers can see through. A new review looked at 79 explainable AI studies and found most explanations are charts and heatmaps, and only one study even included blind or low-vision users. The World Health Organization says 16 percent of people live with disabilities and 2.2 billion have vision loss. The team built a traffic control prototype and tested it with three non-visual users. Simple text and speech beat complex plots. Keyboard navigation mattered. A persona named Caroline, a blind traffic manager, showed how fast “clear” visuals fail in real work. The lesson is simple. Design for ears and keyboards, not just eyes. Match the explanation to the person, not the model. Use progressive disclosure. Follow WCAG and WAI ARIA. Measure understanding across skill levels. Ship explanations that people can use and trust.

Accessibility isn’t optional—it’s essential. It’s not just about checking a box; it’s about creating inclusive experiences that work for everyone. Here’s how designers can advocate for accessibility without it feeling like an afterthought: 1️⃣ Build accessibility into the design process Accessibility isn’t a last-minute QA step—it’s a design choice. Start integrating it early with tools like: ↳ Stark: Check contrast ratios directly in Figma. ↳ Axe: Test designs for screen readers and other assistive technologies. When accessibility is part of your process, you can avoid costly fixes later by building more inclusive products from the start. 2️⃣ Show the business case Accessibility isn’t just the right thing to do—it’s also good for business. Here’s how: ↳ Better usability: Designs that are accessible for some are often easier to use for all. ↳ Legal compliance: Avoid lawsuits and ensure your designs meet standards like WCAG. ↳ Broader audience reach: Accessible designs open your product to millions of users who might otherwise be excluded. 3️⃣ Educate stakeholders Not everyone understands the impact of inaccessible design. Help make the issue tangible by: ↳ Sharing examples of real-world accessibility challenges (e.g., unreadable text or confusing navigation). ↳ Explaining how inaccessible designs exclude people—and how inclusive design benefits everyone. 4️⃣ Lead by example As designers, we set the tone. Advocate for accessibility by incorporating best practices into your work: ↳ Add alt text for images and icons. ↳ Design with keyboard navigation in mind. ↳ Use clear hierarchies to guide users, especially those relying on assistive devices. Don’t stop at theory. Test your designs with real users, including those who rely on assistive technologies. (The best insights come from real feedback.) Accessibility isn’t an afterthought—it’s a commitment to inclusion, usability, and good design. What’s your favorite way to advocate for accessibility? Share below! 👇 #accessibility #inclusion #uxdesign #leadership #innovation #designstrategy #uxui #designtools ---------------- 👋 Hi, I'm Dane—I share daily design tools & tips. ❤️ If you found this helpful, consider liking it. 🔄 Want to help others? Consider reposting. ➕ For more like this, consider following me.