Color Blind Friendly Colors

I am loving the website but I am red/green colorblind and sometimes struggle with the home calendar summary page as BPM & Load seem to be red colors, yet are muted for my vision. Unless these are recent changes, I’ve always assumed the only coloring was the wattage, with the others simply being bold.

Playing with colors from https://personal.sron.nl/~pault/#sec:qualitative, I wanted to experiment with higher contrast colors.

Here are the RGB values I tested.

<span data-v-28c6e63e="" style="color: rgb(204,51,1);">135bpm</span>
<span data-v-28c6e63e="" style="color: rgb(0,68,136);">298w</span>
<div data-v-28c6e63e="" style=" color: rgb(238,119,51);">Load 54</div>

Here is a sample image below to cross-compare. 19 JAN is modified RGB vs my 21 JAN stock values.

image

Additional feedback:

Why not auto-refresh when new releases occur? I often open a new session to be prompted to restart. If I don’t have a stale window open, why not apply the update automatically?

The ‘Weekly Summary’ on mobile really confused me. I thought somehow I had a new activity on 25 JAN or a recommended workout, then I realized it was the weekly summary. I think it’d be helped to change the background to show it is a highlight. This could be as simple as giving it a gray background so it can be distinguished from the rest, instead of seeming to be a subset of Monday. Alternatively, it might be ideal to keep it consistent with a square box on the left side with an empty right side, as the full width title for dates gives it an assumption it is a header for the below items. (SAT 23 JAN looks like it is a header for 22-19 JAN) Or simply add a note ‘No activities’

4 Likes

That’s a great accessibility reminder!

While David considers your suggestions, I’ll make a note. I’ve heard there are browser extensions that might help you by modifying colors on web pages automatically, e.g. Colorblind - Dalton for Google Chrome - Chrome Web Store

I did some research for the compare page. Supposedly these are colour-blind friendly:

Screen Shot 2021-01-25 at 17.01.13

I am going to have a look at this on the weekend I hope.

2 Likes

Thank you so much for this, I have needed this for years and didn’t know it existed - now I can see the difference between blue and purple!

1 Like

@William_Forde @Zachary_Kjellberg can you distinguish the color swatches that David shows?

@Andrii_Magalich I can indeed, though squares are easier to distinguish compared to text. The main recommendation is to have high contrast colors, as color blindness is a struggle for muted colors blending. (darker red-green tones)

I included sample RGB in my main post as an example, but would be happy to share feedback if there were RGB values you considered & wanted tested.

Yes - I also agree it is the brightness that helps. Dashed line for some would also be a great help.

Can the Compare plots be customized with self-selected colors? I now have three seasons on the power vs. heart rate plot. Season one is blue-ish, season two is red-ish (fine, can distinguish those two), but season three is purple-ish, which is very hard to distinguish from the blue one.

1 Like

Plus 1