Design for Low Vision

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

Did you know there’s a font designed just for accessibility? Meet Atkinson Hyperlegible, it was created by the Braille Institute of America to help people with low vision read more easily. It’s not a braille font (doesn’t include raised dots), but a print typeface. It even won the Fast Company Innovation Design Award in 2019! Molly Burke recently worked with her publisher to use the font for her memoir, Unseen. What makes it different? ⤵️ Hyperlegible exaggerates letter shapes so you can tell the difference between the letter “o” and the number zero (0), capital “i” vs. lowercase “l”, and the capital letter “b” vs. the number “8”. Other design features include: - Big open shapes - Clear spaces inside letters (known as open counters) - Distinct forms for commonly confused characters But who benefits? People who are blind or low vision, and people with dyslexia or visual processing differences. Clearer text equals easier reading! And the best part? It’s totally free 🎉 You can download it via Google Fonts or from the Braille Institute website. It also happens to be the same font this graphic post is written in. Accessibility isn’t always about doing more. It’s about doing things so that everyone benefits! This font is a small design choice with a big impact. Next time you design something: Try Atkinson Hyperlegible. Because readability is inclusion. Did you know about this font?  Share your thoughts or tag a designer friend in the comments! 👇 Image Description: Document with 9 slides. Each slide has a lime green border. The Blindish Latina logo with bold graphic black outline of an eye is at bottom of all slides. There is a white background behind all of the text on all slides. The text is in black and some emphasized phrases are purple. On the bottom of slides 1 and 7 is an image of Catarina, a light-skinned, Latiné woman with medium length wavy brown hair. She’s wearing a black jumpsuit with a V neck and her hands are on her hips. Slide 1 is the title slide that reads: “Did you know there’s a font designed just for accessibility?” On slide 1 there is clip art of a book with a red cover and a brain inside a light bulb. Slide 2 has clip art of an award ribbon. Slide 3 has a screenshot of advocate & content creator Molly Burke speaking at an event from one of her TikTok videos inside the outline of an iPhone. Slide 5 has a dark purple check mark inside a circle. Slide 6 has clip art of a computer outline in black with a wrench and gear in the center. All text on the slides is in the caption and alt text. #Disability #Accessibility #UniversalDesign

Design can only be termed good if it reaches all. Creating beautiful and innovative designs is a key goal for graphic designers. However, even the most visually appealing designs can be inaccessible to some users if they don’t consider various accessibility needs. Low contrast between text and gaudy backgrounds can make it difficult for people with visual impairments or colour blindness to read the content. Decorative fonts can be hard to read for everyone, especially for people with dyslexia or other reading disabilities. So, what do we do to make designs more disability inclusive? 🔍 Understand Diverse Needs: Begin with empathy. Get to know the unique needs and challenges faced by people with disabilities. This understanding will guide your design process to be more inclusive. 🖼️ Accessible Visuals: Use high-contrast colors and clear fonts to make text and images easily readable. 🗣️ Alt Text Matters: Provide descriptive alt text for all images to ensure that screen readers can convey the content to visually impaired users, making your designs more inclusive. 🎨 Responsive Design: Design with flexibility by creating layouts that adapt seamlessly across different devices and screen sizes, including those used by people with disabilities. ♿ Universal Symbols: Use universally recognized symbols and icons to communicate important information. 💬 Inclusive Language: Choose words that respect and acknowledge people with disabilities. Avoid ableist language and ensure your message is positive and empowering. 👩💻 User Testing with Disabled Communities:  Involve people with disabilities in your testing process. Their feedback is invaluable in creating designs that truly meet their needs. Embracing disability inclusion in our designs is the next step to making the world a better place. Let me know of more design inclusive strategies in the comments below! #inclusive #design #accessibility #uxdesign #a11y #disabilityinclusion #universaldesign #webaccessibility #empathyindesign #userexperience #designthinking

When “progress” hurts usability I recently updated my phone with One UI 7 system and suddenly… everything felt unfamiliar. The call screen, the buttons, the menus - all had shifted. What used to be muscle memory (where to press “mute”, how to check quick settings, where to glance for notifications) suddenly became a little puzzle I had to solve each time. For me, it was just inconvenient and frustrating. But then I thought: 👉 What about someone with low vision who depends on consistent icon placement? 👉 Or someone with motor difficulties, who now has to stretch or swipe differently? 👉 Or someone who struggles with cognitive load and relies on predictability? But let's look closer at such questions. Scientific studies show that when icons are moved, resized, or placed differently across screens, people, especially those with low vision, take longer to find them, make more errors, or feel more strain. 1️⃣ Evaluating visual consistency of icon usage across devices A study from Zhejiang University looked at how icons are scaled across devices, how their spacing, size, border shape etc. change. They found that when these visual properties aren’t consistent, user perception is negatively affected — users find it harder to process the icon sets, especially when moving between devices/screens (the link: https://lnkd.in/ePQ8fMbk) 2️⃣ Influence of icon semantics & visual search performance (eye-tracking study) Another study demonstrates that icons that are semantically familiar (that is, the picture suggests clearly what it does) + consistent layouts help people find them faster. When icon familiarity is low, or icons are placed inconsistently (e.g. different positions, different visual density), performance & accuracy drop (the link: https://lnkd.in/efYgWf84) 3️⃣ Low vision users in graphical user interface interaction This study compared people with normal vision to people with low vision using GUI interfaces (in this case home appliance control panels). It found that people with low vision have particular problems when controls are too close together (distance), text is small, contrast is low. Also layout consistency (distance between elements, consistent positioning) matters a lot (the link: https://lnkd.in/eGb8y4K7) That’s when “progress” stops being progress. A sleek new look might impress on the surface, but if it hides information, increases effort, or breaks familiar patterns, it’s not really helping people. And every time, the people most affected are those already facing accessibility barriers. Progress should mean more inclusion, not less. I work as a web accessibility specialist, I help teams make sure their updates don’t create new obstacles and I’d be glad to help review and fix accessibility issues. #a11y #inclusion #webaccessibility #webdesign

Data is only useful if it can be read In data visualization, we talk a lot about colorblind-friendliness, and rightly so. But there's another accessibility factor that's often overlooked: contrast. We often reduce contrast for non-data elements like titles, axis labels and comments. All with good intentions to let the data stand out. But if your labels are too faint, they become unreadable to many, defeating the purpose of adding them in the first place. There Are Standards for This: Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios between text and background to ensure readability: For normal text (<18 pt or 14 pt bold): minimum 4.5:1 For large text (≥18 pt or 14 pt bold): minimum 3:1 That means your soft grey axis label might look elegant to some, but stay invisible to others. Useful Tools to Check Contrast for your charts and dashboards:  ● Contrast Grid – Great for comparing entire palettes at once. https://lnkd.in/e9ZZ6CqW  ● WebAIM Contrast Checker – Plug in foreground and background colors to get contrast ratios instantly. https://lnkd.in/ekns-Kzd  ● APCA Contrast Checker - new and improved way to measure contrast. https://lnkd.in/e397fVHx Contrast isn’t just an aesthetic choice, it’s a usability requirement. Let’s make our dashboards not just beautiful, but usable for everyone. #DataVisualization #Accessibility #ContrastMatters #InclusiveDesign #DashboardDesign #WCAG #LowVision #ColorAccessibility

Yeah, not me standing in the kitchen wrestling with one of those sealed bags that has the built-in zip thingie. I’m pulling. I’m tearing. I’m swearing. Nothing. Then I have to stop, go get my readers, and lo and behold — there’s a tiny dotted line and a little pair of scissors icon that I absolutely could not see two minutes ago. Say, did you know that 75–90% of American adults over 40 wear some form of corrective lens. And 12 million over 40 have clinical visual impairments. If your average donor in the US is somewhere around 60 years old there's a pretty good chance that donor is wearing glasses. Or contacts. Or readers and a magnifying glass and knows how to use the flashlight on their iPhone really, really well. So why are your fundraising materials still using: - 10 point font? - Light text on a dark background? - That avant-garde typeface your brand guide loves but no one over 50 can decipher? Instead, try: - Larger font sizes! - High contract design (dark text on light background, please and thank you) - Simple, legible fonts like Helvetica, Arial, Verdana - or even (brace yourself) . . . Comic Sans. (I said what I said, it's a terrific font for people with dyslexia). Or go all-in with a font designed for legibility, like APHont from the American Printing House. The more you know 🌠 And the better your donors can actually read what you’re sending them.

It doesn't matter how great your website messaging is if nobody can read it. Here are some tips 🔻 Open your website on a desktop computer, laptop, tablet, and phone and make SURE everything (yes everything) is easy to read. Better yet, ask someone older (someone who will be honest with you). Some things to watch out for: 👉 If you're going to place text over an image or pattern, make sure there is a LOT of contrast between the image and the text color. Readability is WAY more important than using a cool image. 👉 Choose a font that is easy to read – in it's normal state, but also in bold and italics. Again, readability is more important than showing off a creative font. 👉 Use all-caps in moderation. Nobody wants to try to read a full paragraph of all-caps copy. 👉 Pay attention to contrast. Do not use a light color on white, or a dark color on black. There are contrast testers that will tell you if your text color is legible based on its background color. Link in the comments! 👉 Don't use complimentary colors (colors across from one another on the color wheel) on top of one another. It causes an odd vibration that is extremely uncomfortable to read. 👉 Give your text a LOT of room to breathe. Make sure that it's not running into the edges of your page or into images or other blocks of text. 👉 Use a font size that's large enough for older people or those with visual impairments to read. Again, clarity over design. 👉 Don't replace real text with images. Images won't work with screen readers, and can't be enlarged as easily with accessibility settings. * * * Did I miss anything? Is there anything that annoys YOU when you're trying to read a website?

Ever tapped the wrong button on a healthcare app because they were all crammed together like a bad game of Tetris? That’s not just annoying. It’s a usability failure. And in healthcare, that means missed refills, skipped messages, or abandoned appointments. Ease of Use is one of the most overlooked (but most critical) dimensions of digital patient experience. When interfaces are hard to tap, guessy to navigate, or visually overwhelming, patients drop off—or never engage to begin with. Here are 5 UX fixes to make healthcare tools feel effortless across devices: 1️⃣ 𝗗𝗲𝘀𝗶𝗴𝗻 𝗟𝗶𝗸𝗲 𝗧𝗵𝗲𝘆’𝘃𝗲 𝗡𝗲𝘃𝗲𝗿 𝗕𝗲𝗲𝗻 𝗛𝗲𝗿𝗲 𝗕𝗲𝗳𝗼𝗿𝗲 Follow the Don’t Make Me Think rule. If a button looks like plain text, it’s not a button. If users have to guess what’s clickable, they’ll guess wrong. 2️⃣ 𝗣𝗿𝗶𝗼𝗿𝗶𝘁𝗶𝘇𝗲 𝗙𝗮𝗺𝗶𝗹𝗶𝗮𝗿𝗶𝘁𝘆 𝗢𝘃𝗲𝗿 𝗡𝗼𝘃𝗲𝗹𝘁𝘆 Use common patterns that feel natural. Patients shouldn’t have to “learn your interface” just to book a flu shot. 3️⃣ 𝗠𝗮𝗸𝗲 𝗘𝘃𝗲𝗿𝘆 𝗧𝗮𝗽 𝗘𝗳𝗳𝗼𝗿𝘁𝗹𝗲𝘀𝘀 Especially for older adults and low-vision users, tap targets should be at least 1 cm x 1 cm with adequate padding. This isn’t just best practice — it’s accessibility 101. 4️⃣ 𝗟𝗲𝘁 𝗙𝗶𝗻𝗴𝗲𝗿𝘀 𝗟𝗲𝗮𝗱 𝘁𝗵𝗲 𝗪𝗮𝘆 Support natural gestures — swiping, pinching, tapping — especially for scrolling long results or zooming into care instructions. 5️⃣ 𝗚𝘂𝗶𝗱𝗲 𝘄𝗶𝘁𝗵 𝗖𝗼𝗹𝗼𝗿, 𝗡𝗼𝘁 𝗖𝗵𝗮𝗼𝘀 Use bright colors for actions that move users forward. If everything is bold, nothing is clear. Prioritize clarity over decoration. When digital care is easy, patients trust it. When it’s clunky, they opt out. 💬 𝗕𝗼𝗻𝘂𝘀: Well-designed UX reduces patient errors and data-entry mistakes, which means fewer compliance headaches for your team. 𝗪𝗮𝗻𝘁 𝘁𝗼 𝘁𝗲𝘀𝘁 𝗵𝗼𝘄 𝗲𝗳𝗳𝗼𝗿𝘁𝗹𝗲𝘀𝘀 𝘆𝗼𝘂𝗿 𝗲𝘅𝗽𝗲𝗿𝗶𝗲𝗻𝗰𝗲 𝗿𝗲𝗮𝗹𝗹𝘆 𝗶𝘀? Let’s apply the PX Scale and uncover where friction is hiding: https://lnkd.in/gVd7Vd-z Because in healthcare UX, friction isn’t just a design flaw — it’s a barrier to care. #HealthcareUX #DigitalHealth #PatientExperience #UXDesign #AccessibilityMatters #DesignForOutcomes #ComplianceByDesign

Let’s take a look at the most common accessibility issues and how to fix them. 1️⃣ Low-contrast button labels The buttons with low-contrast labels are harder to read, especially for users with visual impairments. ✅ How to fix: Ensure that the minimum contrast ratio for normal text size (less than 24px) is at least 4.5 : 1. If the text is large (≥ 24px or ≥ 18.66px bold), the contrast ratio should be at least 3 : 1. 2️⃣ Low-contrast icons When an icon has low contrast against the background, it becomes more difficult for users to recognize it. ✅ How to fix: Ensure that icons have a contrast ratio of at least 3 : 1 against the background. 3️⃣ Small target areas When interactive elements have small target areas (less than 24px) and there is not enough space between them, the user can accidentally click or tap the wrong element. ✅ How to fix: A target area should be at least 24×24px, with certain exceptions, such as sufficient spacing or inline text links. 4️⃣ Using placeholder text instead of labels If input fields don’t have visible labels, it will be more difficult for users to recognize the purposes of the fields. It is a bad practice to rely on placeholder text alone, as it’s often low contrast and disappears when users type. ✅ How to fix: Input fields should have labels or instructions so that users know what data is expected. 5️⃣ Missing error message When an input error occurs, it’s not enough to simply highlight the input field in red without showing an error message, because users won’t be able to understand what’s wrong. ✅ How to fix: When an input error is detected, an error message should appear and clearly describe what’s wrong. Check out the Accessibility Checklist here: https://lnkd.in/d_HACYBy #Accessibility #WCAG #AccessibilityChecklist  #WebAccessibility #InclusiveDesign #ProductDesign #UXDesign

A11Y: Key Principles of Accessible Typography 1️⃣ Text Size: At Least 16px 2️⃣ Line Height: 1.5x the Font Size 3️⃣ Paragraph Spacing: 2x the Font Size 4️⃣ Letter Spacing: 0.12x the Font Size 5️⃣ Word Spacing: 0.16x the Font Size 6️⃣ Line Length: 60-80 Characters Per Line Ensuring Character Differentiation Certain characters can appear similar, making text harder to read. Use fonts that distinguish between: ✅ Uppercase "I" (I), lowercase "l" (l), and number "1" (1) to avoid confusion. ✅ Letters "C" & "O" should be clearly distinct to prevent misinterpretation. ✅ Letters "e", "s", and "o" should have unique shapes for better differentiation. Who Benefits from Accessible Typography? Accessible typography improves readability for everyone, but it is particularly beneficial for: 👓 Users with Low Vision 🎨 Users with Color Vision Deficiency 🧠 Users with Dyslexia 🌫️ Users with Low Contrast Sensitivity So keeping that in mind, let’s build a web that everyone can enjoy! 💡✨ #a11y #ui #ux