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 💨

Smashing Newsletter

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.

Josh W. Comeau and Shaundai Person
Josh W. Comeau and Shaundai Person will be speaking at SmashingConf Front-End @ SF 2023 about JavaScript and React.

Miriam Suzanne and Christine Vallaure
Miriam Suzanne and Christine Vallaure will be speaking at SmashingConf Freiburg 2023 about CSS and Figma.

We’ve also just announced the first speakers for SmashingConf Front-End @ SF 2023 🇺🇸 with Josh W. Comeau, Shaundai Person, Jake Archibald joining in, and for SmashingConf Freiburg 2023 🇩🇪 with Miriam Suzanne, Christine Vallaure and Elliot Jay Stocks. Hurry up: there are only a few last-minute early birds left!

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 Management

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.

https://design.if.eu/design/foundation/data-visualization

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

AWS Amplify Studio
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.


4. Fonts In Data Charts

There are millions of typefaces out there. But which one to use in your charts and tables? Lisa Charlotte Muth takes a closer look at how to choose and adjust typefaces for data visualization.

Data visualization fonts

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!

Smashing Online Events

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!

Smashing Online Events

And as always, here’s an overview of our upcoming online workshops:


6. Designing Accessible Data Visualizations

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.

An intro to designing accessible data visualizations

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

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

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.

Good Country Index

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)


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

unsubscribe update preferences view in your browser

Key phrases

Older messages

#383: Psychology and UX

Tuesday, December 13, 2022

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

#382: Front-End & UX Advent Calendars

Tuesday, December 6, 2022

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

#381: Interface Design

Tuesday, November 29, 2022

Dashboard design patterns, behavioral science, design principles, Figma plugins and easing gradients. Issue #381 • November 22, 2022 • View in the browser 💨 Smashing Newsletter Tere Smashing Friends,

All Good Things JavaScript

Tuesday, November 22, 2022

Finding memory leaks with JavaScript, Internationalization API, security issues and understanding useMemo.Issue #380 • November 22, 2022 • View in the browser 💨 Smashing Newsletter Sveiki Smashing

#379: Web Accessibility

Tuesday, November 15, 2022

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

Enshittification, Clamp() Calculator, Awesome Demos, Temple of Friendship, Design Hacks

Tuesday, January 31, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar January 31 2023 Tiktok's Enshittification pluralistic.net

😎 Sophisticated E-commerce UI Designs + 🏆 Challenge Updates

Tuesday, January 31, 2023

What's Happening At UpLabs This Week? 🙏 Firstly, let's give a big congratulations to Mochammad Naufal, the winner of our latest 🔑 Password Manager App Challenge! Well done!! Next, don't

27 Highlights From Paris Déco Off and Maison & Objet 2023

Monday, January 30, 2023

Plus, these 9 paint colors give small spaces big-room energy View in your browser | Update your preferences Architectural Digest AD PRO Logo THESE 9 PAINT COLORS GIVE SMALL SPACES BIG-ROOM ENERGY Here

Accessibility Weekly #329: Screen Reader Support for Text Level HTML semantics

Monday, January 30, 2023

Sponsored by Automattic. They're hiring. January 23, 2023 • Issue #329 View this issue online or browse the full issue archive. Featured: Screen reader support for text level HTML semantics Steve

Latest stories

Monday, January 30, 2023

Submit Story Learn how to speak a new language like a local with BabbelSPONSORED Babbel is the top language-learning app that helps users start speaking a new tongue in just three weeks. That's

Platform Design, Shader Effects, Browser Extension, Dune Font, Broider

Monday, January 30, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar January 30 2023 What it means to design a platform matthewstrom

Embracing duality

Sunday, January 29, 2023

Issue 128: Avoiding the limitations of binary thinking ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Latest stories

Sunday, January 29, 2023

Submit Story Learn how to speak a new language like a local with BabbelSPONSORED Babbel is the top language-learning app that helps users start speaking a new tongue in just three weeks. That's

Latest stories

Saturday, January 28, 2023

Submit Story Learn how to speak a new language like a local with BabbelSPONSORED Babbel is the top language-learning app that helps users start speaking a new tongue in just three weeks. That's

17 Interior Design Schools Worth Applying To

Friday, January 27, 2023

Plus, if you loved "The White Lotus" palazzo, you'll want to bookmark this Jacques Garcia sale View in your browser | Update your preferences Architectural Digest AD PRO Logo grand