Smashing Magazine - #384: Color and Data Visualization
Color management, data visualization guidelines, typography for data charts, color contrast and accessible data visualizations. Issue #384 • December 20, 2022 •View in the browser 💨
Gō-an Smashing Friends,
With data visualization, we often first think about how to choose the right type of charts and diagrams, but in client work, it usually goes a little bit further than that. We need to think about the right fonts to choose for the visualization, color contrast, accessibility, color management and documentation.
In this newsletter, we explore data visualization from different perspectives: looking at design systems and how they document data visualization, general guidelines around color and fonts, to some examples and publications of how to get it right.
As the year is nearing its end, we sincerely hope that you will find a bit of time to enjoy some calm, relaxing moments away from the shopping noise, with your friends and your loved ones. Sending you a lot of positive energy, good vibes, optimism, hope, and peace for the rest of this year and for the year ahead of us.
Stay smashing and safe, everyone! — Vitaly (@vitalyf)
1. Understanding Color Management
If someone asked you to build a coffee table with legs specified as a height of 50, what do you think that would mean? 50 kilometers? Feet? Inches? Millimeters? Centimeters? The coffee table example comes from Marc Edwards from the Bjango blog and is the perfect analogy to understand color management better.
Color values are not enough to describe a color; you need a color value and a description of the space it exists in to be able to rely on what you’re seeing when choosing colors.
In the 4-part article series about color management, Marc introduces you to everything you need to know about color management. Part 1 and part 2 explain the basics of color management, part 3 details the settings required for screen design in popular design tools, and part 4 proposes a framework for measuring how well color management is supported in screen design tools. A comprehensive overview. (cm)
2. Color Contrast Score Ranges
A punchy headline requires a different color contrast than a button border. So far, nothing new. But which contrast should you choose for which UI element? Matt D. Smith defines five contrast score ranges for specific UI elements to help you find the best contrast for every use case.
As Matt suggests, a contrast range of 12–21 works best for light mode body text and 7–12 for dark mode body text. 4.5+ is a good choice for supporting text, while 3.0+ works well for icons and colorful primary CTAs. Surprisingly, even a failing score of 1.2–1.5 can have its use case — for subtle UI elements like secondary CTA background colors, dividers, and disabled text, for example. The contrast score ranges are also available as a free Figma plugin and a Figma file. Handy! (cm)
3. Data Visualization Guidelines
Data is pretty much useless if we can’t make sense of it. Luckily, data visualization helps us tell the full story. But how to best tackle a data visualization project? We came across some handy guidelines that have got your back.
Shopify’s design system Polaris maps out a set of data viz guidelines for how to approach the task and defines five core traits for what makes your visualizations successful. Do’s and don’ts deliver practical examples.
The If Design System shines a light on color in data visualizations. If you want to dive deeper into different types of visualization, Culture Amp has got you covered with some great further reading resources.
Last but not least, the Carbon Design System features demos and ready-to-use code snippets for React, Angular, Vue, and Vanilla. Inspiration for your next data visualization project is guaranteed. (cm)
From our sponsor
Build And Ship Complete Apps In Just A Few Hours
A visual interface that allows developers to easily build and ship complete web and mobile apps in hours: meet AWS Amplify Studio. Bridge the gap between design, development, and product with centralized workflows that mitigate costly rework. Start for free today.
As Lisa recommends, when in doubt, set your text in a font that is easy to read: sans-serif, neither overly narrow nor wide, regular instead of bold or thin, sentence case, in a size that is big enough to read, and in black or almost black. In her blog post, Lisa illustrates all these options with examples and shows how ignoring the advice can set your visualization apart from others. (cm)
5. Upcoming SmashingConfs And Workshops
Every year we bring bright and kind people who care about the web to share what they’ve learned. For 2023, we can’t wait to welcome you to SmashingConf Freiburg 2023 (Sep 4–6, 2023) with adventures into design systems, accessibility, CSS/JS and interface design patterns. Get your early-bird ticket!
We’re also very excited about our very first SmashingConf Front-End @ SF 2023 (May 23–26, 2023), entirely focused on cutting-edge front-end. From accessibility and advanced CSS to JavaScript gems and web performance. With a dash of Tailwind, Next.js and TypeScript. Get your early-bird ticket!
Accessibility should be at the heart of every product, and it’s not any different for data visualizations. By making your graphs accessible, you not only ensure that everyone can use them but also that they are easier to understand.
Sarah L. Fossheim develops and designs software for the education sector and previously worked in cancer research. She knows first-hand how accessible data impacts more than just the user. In medical software, for example, an inaccessible or confusing graph could lead to critical mistakes, such as giving the wrong medication to a patient.
To help us build better and accessible data visualizations that prevent confusion and misunderstandings, Sarah summarized ten dos and don’ts to keep in mind whenever you’re designing a chart or a graph. A must-read. (cm)
7. Data Visualization Journal
Can we understand blood test results without numbers? How did Soviet artists design data? And how can you visualize the network of the dragons from Game of Thrones? Data visualization is an exciting topic, and you probably won’t find a resource that dives as deep into it as Nightingale.
Nightingale is the journal of the Data Visualization Society, a non-profit organization that supports the growth, refinement, and expansion of data visualization knowledge regardless of expertise level. Run by a team of passionate people, Nightingale publishes articles that cover all aspects of data visualization — from personal stories to exploratory research to interviews with leaders in the community, data ethics, and best practices. A treasure chest for everyone interested in data visualization. (cm)
From our sponsor
Tech Professional? Help The Software Industry Thrive By Joining The Developers Alliance
When it comes to app ecosystem issues, software professionals know best. The Developers Alliance represents 70k developers and app publishers across the globe. Together they advocate for government policies that support the industry's growth. Join the network.
8. The Good Country Index
What does each country on Earth contribute to the common good of humanity? And what does it take away, relative to its size? The Good Country Index attempts to answer these questions. But not only that. It is also a great example of what a user-friendly data visualization that involves a huge data set can look like.
The Good Country Index looks at each country’s external impact on the world by comparing the global contribution in seven fields of interest: science & technology, culture, international peace & security, world order, planet & climate, prosperity & equality, and health & wellbeing. You can toggle them on and off to see how they influence the ranking, and if you want to dive deeper into each of the topics, the chart reveals more details on click. A well-thought-out design that shines with simplicity. (cm)
Behavioral science, user interviews, product design methods, UX research and design system ROI calculator. Issue #383 • December 13, 2022 • View in the browser 💨 Smashing Newsletter Goeije 'n avend
With advent calendars on accessibility, CSS/JS, UX and Web Performance. Issue #382 • December 6, 2022 • View in the browser 💨 Smashing Newsletter Gamarjoba Smashing Friends, It's December! So
With focus styles, WCAG 2.2, accessible PDFs, accessible color palettes and how to document and test accessibility. Issue #379 • November 15, 2022 • View in the browser 💨 Smashing Newsletter Hello
View in your browser | Update your preferences ADPro Year in Review Well, we made it. It's the last day of 2024, so today, we're taking a walk down memory lane to bring you some of our
December 30, 2024 • Issue #429 View this issue online or browse the full issue archive. Featured: Navigating imperfect accessibility frameworks for trauma-informed outcomes "So what is it then? Am
View in your browser | Update your preferences ADPro Glory, Gloria Every year our AD100 honorees fill out a survey of projects that they're working on. A year or so ago, longtime AD100 designer
View in your browser | Update your preferences ADPro Holiday Cheer Whether your taste leans traditional, modern, or all-out extravagant, AD is rife with inspiration for your holiday. In the spirit of
Radio garden, Zoom backgrounds, visual history of the alphabet and fun interactive experiences. Issue #488 • Dec 24, 2024 • View in the browser Smashing Newsletter Hello Smashing Friends, As we are
December 23, 2024 • Issue #428 View this issue online or browse the full issue archive. Hey accessibility friends! It's the time of year where news and information slows down as many people take
View in your browser | Update your preferences ADPro Emboldening the Bath Marble, marble, everywhere, and every drop is chic. According to AD100 designer Jake Arnold, “material drenching”—that is,
