September 13, 2022 Smashing Newsletter: Issue #370
This newsletter issue was sent out to 223,392 subscribers on Tuesday, September 13, 2022.
Editorial
Last week, we finally ran an in-person SmashingConf in our hometown Freiburg, Germany (check the conference photos). It was a truly wonderful gathering of 350 friendly designers and developers who were learning from each other and having fun along the way as well. From cable car adventures to puzzles, mysteries, and you-can’t-stop-me live DJ Tobi, it was an experience that hopefully will be difficult to forget.
Fortunately, we have another adventure coming up just in a few weeks. SmashingConf New York is coming up on Oct 10–13, with wonderful speakers exploring design systems, CSS, web performance, Web3, interface design and accessibility. Get your ticket now and join in — in-person or online.
In this newsletter, we dive into front-end accessibility as well — exploring tooling, accessible charts, forced colors, dark mode accessibility and an accessibility checklist. We hope that it will help you make your site or app a bit more accessible.
Sending you warm hugs for the times ahead!
— Vitaly (@vitalyf)
1. Accessibility Tools For Figma
Are you using Figma? Then the Stark Suite for Figma is for you. It combines plugins, browser extensions, and tools that help you streamline your accessibility workflow and ensure your designs are compliant with AA or AAA requirements.
Whether it’s simulating what your design looks like for people with different types of vision, ensuring that users of assistive technologies can navigate your design, or checking that touch targets are large enough for everyone, the Stark Suite has got you covered. A powerful bundle to find accessibility issues before a design goes into production or to quickly fix what’s already in flight. (cm)
2. Color Accessibility Resources
Not every user experiences color in the same way. Some might be color blind, some visually impaired, or in different environments. So when choosing colors for a project, it is important that your color choices are accessible. Stéphanie Walter collected useful tips, tools, and resources that help you get started with inclusive design and color accessibility.
In Stéphanie’s collection, you will find color blindness simulator tools to check your color choice against different types of color blindness, tools for checking contrast ratio in your mockups, tools for finding alternative compliant color choices, and articles and resources to help you build accessible color palettes. Stéphanie also looks into what to do if you need to change corporate colors because of contrast issues and why you should be careful with CSS background images. An in-depth look at color from an accessibility perspective. (cm)
3. Accessible Charts
The value and insight that a chart or data visualization provides often get lost for people with vision impairments. Particularly for people who don’t use assistive technology like screen readers to consume web content — color-blind users, for example. But what can you do to make your data accessible to everyone?
Kent Eisenhuth’s and Kai Chang’s case study explores how an accessibility-first approach led them to a better visual design. They highlight how they used WCAG in their design process and how their approach ensures that accessibility is a core to the chart’s visual design without compromising focus, sacrificing readability, or adding unnecessary chartjunk.
Another practical resource for designing accessible charts comes from Denis Kryukov. He summarized strategies and best practices to make your charts more accessible and convey your message more clearly — for everyone. (cm)
4. Upcoming Online Workshops
That’s right! We run online workshops on frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s an overview of our upcoming workshops:
- Designing Better UX With Top Tasks Workflow
with Gerry McGovern. Sept 13–27 - Designing Better Products Masterclass UX
with Stéphanie Walter. Sept 21 – Oct 5 - Architecting Design Systems Workflow
with Nathan Curtis. Oct 6–14 - Optimistic UI Masterclass Dev
with Zell Liew. Oct 6–14 - Designing for Emotion Masterclass UX
with Aarron Walter. Oct 17–18 - Designing The Perfect Web Forms UX
with Vitaly Friedman. Nov 17–18 - Smart Interface Design Patterns Video Course UX
9h-video course on interface design with Vitaly Friedman.
5. Accessible Colors For Design Systems
Have you heard of Leonardo already? More than two years ago, the Adobe open-source tool made its appearance as the first-of-its-kind contrast ratio-based color generation tool. Since then, it has evolved as both a design and engineering tool for creating accessible color palettes for design systems.
Leonardo has three primary workspaces for design systems: creating an adaptive color scheme, creating color scales for data visualization, and the color toolbox. If you want to dive deeper into how they can help you streamline your workflow, Nate Baldwin takes a closer look. A powerful timesaver that helps you do work that usually takes hours in minutes. (cm)
6. A Practical Guide To Forced Colors
Forced colors is a CSS media query that radically changes the way your site looks. Available in all versions of Windows and Ubuntu, when active, Forced colors set UI elements like text, background, links, and buttons to colors that the user chooses. To prevent bad surprises and accessibility pitfalls, there are a few things you can do to make sure your site works well with Forced colors.
In his practical guide to Forced colors, Kilian Valkhof explores how Forced colors work and why they are used. He shares tips for how to test your design for forced colors and what you need to take care of to make it look good in them. Little changes that don’t take a lot of time but that make a real difference for everyone who sets their device’s UI to Forced colors. (cm)
7. Dark Mode Accessibility
Dark mode has become an emerging trend in user interface design in the last few years. Apart from its sleek look, it is also considered better for the eyes than light color themes. But does dark mode really reduce digital eye strain>? Dora Cee scoured through research papers to find clear answers and help us make an informed decision.
When designing a dark theme, reusing existing colors or inverting shades usually isn’t a good idea as it could increase eyestrain and make your design harder to use in low light. In the worst case, it may even break your visual hierarchy, as Teresa Man points out. In her article on the Superhuman blog, she shares a systematic approach to designing dark themes that are readable, balanced, and delightful. (cm)
8. Accessibility Guidance
The checklist that is not a checklist. That’s how the team at Intopia describes their Accessibility Not-Checklist. If you’re new to accessibility, the resource provides an overview of what you’ll need to consider to build accessible and inclusive experiences. And if you’re already familiar with accessibility, it acts as a guide to make sure you haven’t missed anything.
The Not-Checklist is based on WCAG requirements and also provides best practice recommendations. You can filter the content by WCAG version and level, topics, and even job roles to get only the information that matters most for your work. A handy accessibility resource you might want to keep close. (cm)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.