Ideas |
by Alex Duner
This story is part of a series on bringing the journalism we produce to as many people as possible, regardless of language, access to technology, or physical capability. Find the series introduction, as well as a list of published stories here.
I am one of the 8% of men of Northern European descent who suffers from red-green colorblindness. Specifically, I have a mild case of protanopia (also called protanomaly), which means that my eyes lack a sufficient number of retinal cones to accurately see red wavelengths. To me some purples appear closer to blue; some oranges and light greens appear closer to yellow; dark greens and brown are sometimes indistinguishable.
Most of the time this has little impact on my day-to-day life, but as a news consumer and designer I often find myself struggling to read certain visualizations because my eyes just can’t distinguish the color scheme. (If you're not colorblind and are interested in experiencing it, check out Dan Kaminsky’s iPhone app DanKam which uses augmented reality to let you experience the world through different color visions.)
As information architects, data visualizers and web designers, we need to make our work accessible to as many people as possible, which includes people with colorblindness.
Color is critical
Color is frequently used to quickly convey meaning. It's an important choice for any visualization, but making one that's attractive, informative and easily distinguishable by colorblind people trips up many designers.
The NPR Visuals team worked through these challenges this spring in a visualization for a story on how school districts spend money.
“Early on after some doing some exploration of the data we knew we were going to do a district level choropleth map,” said Katie Park, deputy graphics editor at NPR. “We thought that it would be easier to read with a diverging color palette where the center value was the U.S. average. When you get into divergent color palettes you realize that colorblindness might become an issue.”
Park said that the default color schemes designers might use — like green for positive values and red for negative values — tend to cause problems for colorblind readers.
Meanwhile, common colorblind friendly palettes like magenta/green or orange/purple are devoid of meaning. Pink, for example, doesn’t convey negativity like red does. Others, like blue/red, are already imbued with too much cultural meaning and would be confusing in a non-political map.
Sometimes you can get away with using a single hue and varying its lightness. But sometimes a project calls for a multi-hue scale or a diverging scale. (If you’re interested in reading more, The New York Times’ Gregor Aisch wrote a blog post about his library chroma.js that goes into more detail on multi-hue scales)
Three tools to help
There are a few simple tools to help ensure that your projects are colorblind-friendly.
- Start by using the color schemes on ColorBrewer, which gives you sequential, diverging, and categorical (sometimes called binary) palettes that are colorblind safe. You can use these and modify them to fit your style guide. “I try to find a good compromise between our colors, the colors that work in ColorBrewer, and the things that look good on the page,” Park said, noting that she'll tinker with the colors in Illustrator until she’s happy with the palette. “Usually my trick is to tweak the shades a little bit so that the greens have a little bit more blue in them,” Park added. “But the problem with that is that if you’re greens get too blue then you start to look like you have a political map or the colors just don’t read as intuitively.”
- Gregor Aisch’s chroma tool is also useful for optimizing your diverging color palettes. It can help you take two or more colors and generate a full scale of in-between values.
- Before publishing, you should check your work. Color Oracle and Sim Daltonism both let non-colorblind people simulate colorblindness on their screens.
The great thing about picking a palette, is that once you have it, you can use it again and again.
Taking a few minutes before publishing a project to make sure it’s colorblind friendly is an easy way to make your work have a bigger impact.
About the author
Student Fellow
Tagged
Katie Park Dan Kaminsky Gregor Aisch color Sim Daltonism Color Oracle chroma.js ColorBrewer a bigger tent colorblindness
Latest Posts
-
Lab , projects |
A Big Change That Will Probably Affect Your Storymapsby Joe Germuska | joegermuska
A big change is coming to StoryMapJS, and it will affect many, if not most existing storymaps. When making a storymap, one way to set a style and tone for your project is to set the "map type," also known as the "basemap." When we launched StoryMapJS, it included options for a few basemaps created by Stamen Design. These included the "watercolor" style, as well as the default style for new storymaps, "Toner Lite." Stamen...
Continue Reading
-
People |
Introducing AmyJo Brown, Knight Lab Professional FellowAmyJo Brown, a veteran journalist passionate about supporting and reshaping local political journalism and who it engages, has joined the Knight Lab as a 2022-2023 professional fellow. Her focus is on building The Public Ledger, a data tool structured from local campaign finance data that is designed to track connections and make local political relationships – and their influence – more visible. “Campaign finance data has more stories to tell – if we follow the...
Continue Reading
-
Ideas |
Interactive Entertainment: How UX Design Shapes Streaming Platformsby Max Johnson
As streaming develops into the latest age of entertainment, how are interfaces and layouts being designed to prioritize user experienceand accessibility? The Covid-19 pandemic accelerated streaming services becoming the dominant form of entertainment. There are a handful of new platforms, each with thousands of hours of content, but not much change or differentiation in the user journeys. For the most part, everywhere from Netflix to illegal streaming platforms use similar video streaming UX standards, and...
Continue Reading
-
Lab projects |
Innovation with collaborationExperimenting with AI and investigative journalism in the Americas.by Mago Torres | magiccia
Lee este artículo en español. How might we use AI technologies to innovate newsgathering and investigative reporting techniques?This was the question we posed to a group of seven newsrooms in Latin America and the US as part of the Americas Cohort during the 2021 JournalismAI Collab Challenges. The Collab is an initiative that brings together media organizations to experiment with AI technologies and journalism. This year, JournalismAI, a project of Polis, the journalism think-tank at...
Continue Reading
-
Lab projects , En Español |
Innovación con colaboraciónCuando el periodismo de investigación experimenta con inteligencia artificial.by Mago Torres | magiccia
Read this article in English. ¿Cómo podemos usar la inteligencia artificial para innovar las técnicas de reporteo y de periodismo de investigación?Esta es la pregunta que convocó a un grupo de siete organizaciones periodísticas en América Latina y Estados Unidos, el grupo de las Américas del 2021 JournalismAI Collab Challenges. Esta iniciativa de colaboración reúne a medios para experimentar con inteligencia artificial y periodismo. Este año, JournalismAI, un proyecto de Polis, la think-tank de periodismo...
Continue Reading
-
Studio | Journalism AI Readiness Scorecard
AI, Automation, and Newsrooms: Finding Fitting Tools for Your Organization
by Hannah Barton , Helen Bradshaw , Joshua Hoeflich , Grace Lee , Sammie Pyo
If you’d like to use technology to make your newsroom more efficient, you’ve come to the right place. Tools exist that can help you find news, manage your work in progress, and distribute your content more effectively than ever before, and we’re here to help you find the ones that are right for you. As part of the Knight Foundation’s AI for Local News program, we worked with the Associated Press to interview dozens of......
Storytelling Tools
We build easy-to-use tools that can help you tell better stories.
