Contrast, font, legibility improvements

Hello

I just discovered this tool which I find very effective and well thought out. The features are well adapted and I am really convinced by my first tests.

The problem comes rather from the accessibility of colors … The level of contrast is definitely too low.

Some examples checked with WebAIM tool (WebAIM: Contrast Checker)

  • left sidebar items gray color (#878787) : WCAG AA & AAA failed (too low ratio : 3.59 :1)
  • left sidebar items green color (#4fa84e) : WCAG AA & AAA failed (too low ratio : 2.98 :1)
  • left sidebar item icons color (#bbbbbb) : WCAG AA & AAA failed (too low ratio : 1.91 :1)
  • in the main frame, task description color (#949494) : WCAG AA & AAA failed (too low ratio : 3.03 :1)
  • in the main frame, task description green links color (#7cc57a) : WCAG AA & AAA failed (too low ratio : 2.07:1)
  • in the main frame, task action icons hover (trash/energy/etc.) gray color (#dfdfdf) : WCAG AA & AAA failed (too low ratio : 1.33:1)

After an hour of use, my eyes cry because of this poor readability…

I can help you. For example, if you send me all the color codes used in the app (in CSV for example), I can send you the color translation to respect WCAG AA & AAA.

I sincerely hope that you will be able to develop these essential accessibility points.

Have a nice day

Seb

Seb,
Thank you for such detailed feedback. I have reviewed every item you have posted.

I couldn’t find these exact colors. For unselected navigation items we have the text of color #6a6a6a over #ffffff, so it’s plenty of contrast - 5.4 :1.
For selected items we have #4AA648 over #F3F3F3. This has only 2.76 :1 contrast. I think we can push this text and similar green labels to about 3.3 without breaking the app look, but not much further. https://webaim.org/resources/contrastchecker/?fcolor=469B44&bcolor=F7F7F7

Couldn’t find this one. The description text is 5.32:1 WebAIM: Contrast Checker

Regarding the icons, I’m not sure this standard applies. At least the tool deals with text only. But I will try adjusting the icons as well, in particular, the time/energy labels on hover.

The problem with strictly adhering this standard (and I really tried to pick good color substitutes) is that it requires changing the styling of the app drastically, which is not something to take lightly given that many users don’t have any problems with current contrast.

Hi. Thanks for the response. I will wait the next release to check it. Have a nice week-end

Hello,

what about implementing “Themes” like in TickTick or Todoist. That could be some predefined themes with high and low contrast and different colors (not everyone likes “green”) or even editable colours for headers, notes, tags etc.

cheers
Christian

Hello Aldain,
a dark theme is often suggested, as well as theming support in general. Long term, I would like to see the dark theme implemented and the light theme improved. We are tweaking the current UI often to improve contrast without changing the looks drastically.