Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Colorblind friendly UI

See original GitHub issue

Hello! Thanks for all your work on Airflow 😃

Description

Reds (failed) & greens (success) colors are not colorblind friendly.

Use case / motivation

As a deuteranope, when I view recently run dags, it’s not clear which runs succeeded and which failed. To me, this is probably one of the most important features of the Airflow UI.

Screen Shot 2020-03-23 at 10 18 59 AM

You could convince me everything succeeded or failed in this screenshot.

Suggestions

Totally understand that red/green are important for our common expectations of failure/success, so I’ll just propose some other reds/greens that work for me, with the caveat that there are many more types of colorblindness than my own so it’s worth getting a diverse set of opinions here. Something other than default red and green web colors will be tremendously helpful though!

red / DarkSeaGreen - simple change, works well with the yellow “running” value

Screen Shot 2020-03-23 at 10 21 58 AM

clrs.cc failed = #FF4136, success = #2ECC40, running = #01FF70 - this comes with the bonus of being A11Y compliant.

Screen Shot 2020-03-23 at 10 31 45 AM

Happy to create more combinations, if helpful. Cheers!

Issue Analytics

State:
Created 3 years ago
Reactions:41
Comments:19 (8 by maintainers)

Top GitHub Comments

10reactions

kaxilcommented, Apr 23, 2020

Added it to 1.10.11 milestone, we will include this in Airflow 1.10.11

However, I would like to know what would best work for you all

Options:

Default to colorblind friendly UI
Make the colors configurable

Can you please let me know in comments, please?

5reactions

kaxilcommented, Jun 25, 2020

I have created a PR : https://github.com/apache/airflow/pull/9520 to implement changing Task States colors.

PS: I am not good with UI but with the current change, it should work fine. Can you all give it a shot and post your feedback, please.

We will soon release 1.10.11 and I would like to include this change 😃

Top Results From Across the Web

Designing UI with color blind users in mind | Secret Stache

7 Ways you can improve color accessibility for color blind users · #1: Use patterns and textures · #2: Utilize colors and symbols...

UI Design for Color Blind Users - Boldist

How to Design for Color Blind Users · Don't Define With Color Alone · Understand Contrast and Color Choices · Implement Patterns and...

Color blindness: how to design an accessible user interface

Recognizing objects, colorblind people rely on the luminance contrast. One way or another this contrast exists in any color palette, but it can ......

Designing for colorblind access. Part 1: UI components

I've assembled a series of suggestions for how to make your components accessible without prescribing a final solution. What path your design ...

10 Essential Guidelines for Colorblind Friendly Design

But what if your audience is color blind? Learn how you can design effective, accessible, and appealing user interfaces for colorblind users?