Visual Design Elements

💎 Accessibility For Designers Checklist (PDF: https://lnkd.in/e9Z2G2kF), a practical set of cards on WCAG accessibility guidelines, from accessible color, typography, animations, media, layout and development — to kick-off accessibility conversations early on. Kindly put together by Geri Reid. WCAG for Designers Checklist, by Geri Reid Article: https://lnkd.in/ef8-Yy9E PDF: https://lnkd.in/e9Z2G2kF WCAG 2.2 Guidelines: https://lnkd.in/eYmzrNh7 Accessibility isn’t about compliance. It’s not about ticking off checkboxes. And it’s not about plugging in accessibility overlays or AI engines either. It’s about *designing* with a wide range of people in mind — from the very start, independent of their skills and preferences. In my experience, the most impactful way to embed accessibility in your work is to bring a handful of people with different needs early into design process and usability testing. It’s making these test sessions accessible to the entire team, and showing real impact of design and code on real people using a real product. Teams usually don’t get time to work on features which don’t have a clear business case. But no manager really wants to be seen publicly ignoring their prospect customers. Visualize accessibility to everyone on the team and try to make an argument about potential reach and potential income. Don’t ask for big commitments: embed accessibility in your work by default. Account for accessibility needs in your estimates. Create accessibility tickets and flag accessibility issues. Don’t mistake smiling and nodding for support — establish timelines, roles, specifics, objectives. And most importantly: measure the impact of your work by repeatedly conducting accessibility testing with real people. Build a strong before/after case to show the change that the team has enabled and contributed to, and celebrate small and big accessibility wins. It might not sound like much, but it can start changing the culture faster than you think. Useful resources: Giving A Damn About Accessibility, by Sheri Byrne-Haber (disabled) https://lnkd.in/eCeFutuJ Accessibility For Designers: Where Do I Start?, by Stéphanie Walter https://lnkd.in/ecG5qASY Web Accessibility In Plain Language (Free Book), by Charlie Triplett https://lnkd.in/e2AMAwyt Building Accessibility Research Practices, by Maya Alvarado https://lnkd.in/eq_3zSPJ How To Build A Strong Case For Accessibility, ↳ https://lnkd.in/ehGivAdY, by 🦞 Todd Libby ↳ https://lnkd.in/eC4jehMX, by Yichan Wang #ux #accessibility

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!

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

In my former life, I was a graphic designer. I spent years obsessing over layouts, grids, color palettes, and the tiny details that make a design feel right. When I moved into learning design, I realized those same skills gave me an edge. The PARC principles I had been using for years—Proximity, Alignment, Repetition, and Contrast—translated perfectly into creating clearer, more engaging learning experiences. Proximity Group related content so learners instantly understand what belongs together. Alignment Position elements with purpose. Consistency in placement makes content easier to follow and trust. Repetition Repeat visual cues like colors, fonts, and layouts. Predictability helps learners focus on the message instead of figuring out the interface. Contrast Highlight what matters most. Use size, color, and whitespace to create a clear visual hierarchy. This simple system works in both worlds—graphic design and learning design—because it’s all about reducing friction, improving clarity, and guiding attention. What principles have you borrowed from another field that’s improved the way you create learning experiences?

Here's something that surprises people: WCAG has no minimum font size requirements. Your site could use 8px text and still technically pass accessibility standards. But real users with low vision? They're struggling to read anything on your site. "But users can just zoom in or resize text in their browser," you might think. Sure, they can. But most people don't know that's even an option. And even if they do, why should we make them work harder to access basic content? This is exactly why compliance ≠ accessibility. I see this gap all the time when working with teams. They'll run automated scans, fix the flagged issues, and think they're done. But accessibility isn't just about passing tests – it's about real people having real experiences with your content. The best accessible sites go beyond technical requirements. They ask: "Can someone actually use this?" Not just "Does this validate?" Some other compliance gaps I see regularly: • Keyboard navigation that technically works but feels clunky or confusing • Alt text that describes images but misses the context or purpose • Color contrast that meets ratios but still feels hard to read in real conditions • Forms that are properly labeled but have unclear error messages True accessibility happens when we design for humans, not just validators. What compliance gaps have you noticed in your work? I'm curious what patterns others are seeing out there. #Accessibility

Ever look at a design and think, “Why does this just feel right?” It probably wasn’t luck. It was principles. Even if you’re DIYing your own brand, these are the quiet rules that hold everything together. The difference between something that looks good and something that feels intentional. Here’s how to think about them: 1. Balance Your layout should feel steady. You can go symmetrical (same on both sides) or asymmetrical (different, but still even). Think of it like styling an outfit, too heavy on one side and it feels off. 2. Contrast Use differences in color, size, or shape to make what matters stand out. Contrast is how you say: Look here first. 3. Hierarchy Not everything deserves the same volume. Your viewer’s eye needs a guide; title first, then details, then fine print. 4. Unity & Harmony Everything should feel like it belongs together. Your fonts, colors and imagery should speak the same visual language. 5. Repetition Repetition builds recognition. Use the same colors, shapes, or patterns consistency = confidence. 6. Movement Guide the eye where you want it to go. Good design tells a story, one glance at a time. 7. Emphasis Choose one focal point. Let it breathe. Don’t let every element scream for attention. 8. Proximity Group related things together it helps people make sense of what they’re seeing. 9. White Space Don’t fill every inch. Space gives your design air and your message, power. 10. Proportion & Variety Play with scale to add interest big next to small, light next to bold. It keeps things dynamic, not dull. Design isn’t just about how it looks. It’s about how it feels and how clearly it communicates. When you start designing with principles (not just aesthetics), you create work that builds trust, connection and recognition. ♻️ If this helped simplify design for you, hit Repost or Share — your network of solopreneurs might need the same reminder.

♿💻 Accessibility isn’t just “nice to have” — it’s what makes a website usable for everyone. When we design or build, every detail matters: 🔹Text: readability, contrast, resize without breaking layout 🔹Headings (H1–H6): logical hierarchy, one H1 per page 🔹Alt text: meaningful descriptions for images 🔹Hover & focus states: visible indicators, no “hidden focus” 🔹DOM order: ensure keyboard navigation follows a logical path 🔹ARIA labels: add context where HTML alone isn’t enough To guide us, WCAG uses 3 compliance levels: 🔹 A (Must have) – The basics. Without this, many people simply cannot use your product.
 Examples: keyboard navigation, alt text for images, sufficient text contrast. 🔹 AA (Should have) – The standard most organizations aim for. It balances inclusion with practicality.
 Examples: focus visibility, resizable text, clear headings, captions for live audio. 🔹 AAA (Nice to have) – The gold standard. Harder to achieve everywhere but amazing if you can.
 Examples: sign language interpretation, extended audio descriptions, very high contrast text. #Accessibility #A11y #WCAG #UXDesign #UI #InclusiveDesign #WebDevelopment #ProductDesign

Drop the white. Your clean background is creating visual friction. We tend to equate pure white with professionalism. But for a massive part of your ecosystem, that stark background is not professional. It is a strobe light. I have posted about this before. The feedback from UX researchers, designers, and accessibility advocates helped expand this landscape significantly. The clinical reality is that high contrast drains executive function. You force users to burn cognitive fuel just to stabilize the image, leaving less fuel to actually understand the content. Here is an updated guide to cultivating visually accessible digital environments. 1/ The Strobe Light (Stark White) → The Code: #FFFFFF → The Issue: For the 14% of the population with Scotopic Sensitivity, high contrast black text on pure white causes text to vibrate. It acts as an optical strobe light, washing out the letters. → The Environment: Pair this stark hex code with harsh fluorescent office lighting, and you actively trigger visual migraines and severe optical drag. 2/ The Deep Shade (Pure Black) → The Code: #000000 → The Issue: Dark Mode is not a universal cure. For the 33% of people with astigmatism, pure black backgrounds cause halation. The text becomes fuzzy, bleeds into the dark, and forces the eyes to overwork just to focus. 3/ The Soft Sun (Optimal Contrast) → The Standard: The British Dyslexia Association explicitly recommends avoiding bright white. You want soft, not stark. → The Metric: Accessibility experts note that an ideal luminance contrast ratio sits between 7 to 1 and 15 to 1. Going over 15 to 1 becomes difficult to tolerate. 4/ The Solarized Upgrade → The Codes: Background FDF6E3 with Text 657B83. → The Science: Lowers contrast gain. It mimics reading on a sunny afternoon rather than staring into a flashlight. 5/ The Sepia Upgrade → The Code: Background F4ECD8. → The Science: Provides a cozy warmth that reduces blue light exposure and relaxes the ciliary muscles in the eye. 6/ The Cream Upgrade → The Codes: Background FFFFE5 or FAFAFA. → The Science: Replaces the harsh #FFFFFF and #000000 with a gentle off white. Reduces glare while preserving a familiar paper feel. This is a standard recommendation for dyslexic readers. 7/ Expanding the Ecosystem → The Goal: Normalize customization. The goal is never to force everyone into a sepia box. → The Practice: Build websites that respect custom user style sheets. Ensure your contrast choices do not break screen reader compatibility. Empower user agency so individuals can adjust the lighting for their own specific neurobiology. White space is important. But it does not have to be white. Check your recent slide deck or website. Are you planting visual friction, or are you cultivating flow?

How I create infographics that convert... 9-step system that works every time. I've seen it all before... Infographics with: → Too much text. → Outdated visuals. → No clear flow. But when done right? They grab attention, educate, and drive action. I've teamed up with the king of infographics. ↳ Hristo Butchvarov to make yours shine. Here's the proven recipe for success: 1. Define Your Goal Educate, inspire, or sell - be clear. ✘ No vague objectives. 2. Write a Bold Headline Short, clear, and compelling titles win. ✘ No generic or wordy headlines. 3. Simplify Colors Stick to 3–5 complementary colors. ✘ Avoid overwhelming palettes. 4. Organize Logically Intro → Body → Conclusion. ✘ No scattered or random info dumps. 5. Focus on One Idea One key message per section. ✘ Don’t cram too much into one space. 6. Use High-Quality Visuals Crisp icons, images, and charts. ✘ No blurry or pixelated visuals. 7. Leverage Typography Bold fonts and colors for key points. ✘ Skip overly decorative or hard-to-read text. 8. Add a Clear CTA Tell viewers exactly what to do next. ✘ No vague or missing instructions. 9. Test Readability Check on mobile and desktop. ✘ Don’t forget small-screen users. Infographics are more than visuals. Even I catch myself adding too much text sometimes. But my best ones follow these 9 clear principles. Want more spicy LinkedIn tips? Follow us for more. P.S. If you’re looking for a top-notch infographic designer, Hristo is the real deal. I've had the pleasure of collaborating with him and can confidently say he’s exceptional. Highly recommend reaching out.

Most charts get ignored. Great ones get remembered. If your data doesn’t spark clarity, it won’t drive action. You don’t need louder visuals. You need smarter storytelling. Here are 7 shifts to help your charts inform, engage, and stick: 1️⃣ Focus on what matters ➟ Cut out clutter and extras. ➟ Use only what drives understanding. 2️⃣ Remove visual noise ➟ Ditch the 3D, shadows, and flashy backgrounds. ➟ Keep attention on the message. 3️⃣ Make complex info simple ➟ Use clear layouts. ➟ Break things down, step by step. 4️⃣ Use color with purpose ➟ Choose colors for contrast, not decoration. ➟ Be mindful of accessibility. 5️⃣ Lead with the point ➟ Use the Pyramid Principle. ➟ Start with the insight, support it underneath. 6️⃣ Annotate the story ➟ Add callouts or notes to guide attention. ➟ Connect the dots for the viewer. 7️⃣ Keep your style consistent ➟ Fonts, layout, and colors should flow. ➟ Design is clarity, not decoration. The takeaway: Every graph, chart, and slide is a chance to lead through insight. Use structure to show the story—and make it stick. What’s one data mistake you see all the time? Drop it below. Let’s help each other improve our slides. 📌 Save this before your next presentation 🔁 Share with your team to sharpen their storytelling 👤 Follow Jay Mount for high-trust tips on data, clarity, and communication that moves people.