Hej Smashing Friends,
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.
For every talk, there was a Q&A with the speaker, with questions brought by the audience online and in the venue. dina Amin sharing her experiences after her talk.
Ivan Akulov speaking about JavaScript at SmashingConf Freiburg 2022. Photos by Marc Thiele.
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)
From our sponsor
Answering Tough Leadership Questions On The Postlight Podcast
If you’re looking for insights on how to get to a successful product launch, why being vulnerable can help make you a better leader, or how to ship software with realistic deadlines, the Postlight Podcast is for you. Each week, join Postlight CEO Gina Trapani and President Chris LoSacco alongside industry guests for candid conversations on tech, business and leadership. Tune in today!
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.
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.
As always, here’s an overview of our upcoming workshops:
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)
From our friends
Level Up Your Design Career With Femke Design
Product Design is more than just the visual craft and pixels — it’s strategy, storytelling, articulating rationale and having conviction in your work. As a designer who’s worked in big tech, Femke has had to build these skills on her own, but you shouldn’t have to! Level up your design career by joining the femke.design community, or start with her brilliant design videos on YouTube.
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)
From our sponsor
Northwestern’s Online MS in Information Design and Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more.
9. New On Smashing Job Board
10. Recent Smashing Articles
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).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
