Hmm I am not sure looks a bit lighter on my screen. A little more contrast would help in the highlights or if possible adding subtle animation of scaling them by a bit and adding box shadow when highlighted might help make it more legible too.
I found that a bolder highlight color stands out too much - it distracts from the task list area, which is where the attentions should be most of the time.
I have two areas that I’d like to see a bit more contrast. You Id’d the first with checkboxes. The second wouuld be the headers in the menu on the left side. The info below them seems dard enough but the headers could maybe use a color tweak. In my example, I’m speaking of Notebooks and Tags…not a huge issue either way.
I think let’s first try to make the default theme look well - it’s much easier to do and won’t distract the development effort. Then we will see if further customization is needed.
Everything suggested here so far has been addressed and is scheduled for release in 0.16 early this week.
The changes are mostly subtle, but in the right direction.
Really appreciate everyone’s input so far! Please share if you notice anything else.
For me the contrast in the whole application is off. Looking at the screenshots of others, that seems to be the case for others, too. This unfortunate “design” trend in recent years of using grey fonts on grey background makes text just unreadable.
Why not simply use a black font colour throughout the app?
Using different shades of grey helps to (de)emphasize certain areas of the user interface. In Everdo specifically, the item’s titles are what should draw the most attention, which is why they have the highest contrast. Navigation elements, on the other hand should draw as little attention as possible.
The “black on white contrast is best” argument is valid for text, which you are supposed to read for prolonged periods of time. Apps are not websites or books, and the user is certainly not supposed to spend more than a few seconds “reading” the navigation elements.
Smaller fonts look especially bad black-on-white (jagged edges). Making the contrast lighter helps. Apps often use small fonts to get secondary content on the screen at once.
We want to achieve a balance of good looks and readability. It’s clear to me that more contrast is not always a good thing for an app. If you are on Windows, try enabling one of the high-contrast themes. I don’t think many users would be pleased with an app designed like that.
I’m not saying it’s perfect at this point and agree that things can certainly be improved. We do encourage and implement specific improvements as they are suggested.
I think it’s great that you want the app to look as good as possible, I really do. But if people cannot read their tasks properly, they cannot use the app. It really is that simple.
Concerning your specific points:
Sure. Nirvana also uses different contrasts and grey texts at some places, but the contrast of the tasks themselves are much higher (and the font size is also larger), making them much more readable.
The argument is not about black and white, but high contrast in general. And I certainly spend more than a few seconds in my task manager, reading and managing my tasks.
Exactly. Why not make them larger then? They are much smaller then in Nirvana.
The high contrast theme is an extreme example of course, but at least it is very readable (which also is the point of that theme). As I said before, a beautiful design is a nice thing to have, but in my opinion it comes after readability.
I like Everdo, but the contrast is way too low. It would be a real improvement to get some kind of options to change the font color. Or an alternative theme. Something. I find it challenging at time to work with everdo because of the low contrast.
The heading is nice and easy to read. But the rest of it… I don’t know how to explain this. But this bright grey font just isn’t very helpful.
So overall the app looks beautiful. And I completely understand why it looks how it looks. But in my opinion “productiveness” (not sure if this is a real word) is way more important for this kind of app.
Anyhow, thanks for this great app! And sorry for my bad English.
A dark theme should be the highest priority. Many people consider light grey text on white background to be a “deal breaker” (meaning they will switch to another app on this basis alone.)
This would seem to me a contrast issue. It could be fixed by having a “high-contrast” setting which would make the UI “bold black on white” instead of “light grey on white”. That said, I don’t think there are really places in Everdo where important text is in light grey (please do point out if you see any). The titles of items are almost black and the descriptions are a bit lighter. The font sizes are smaller in some places, so some labels may look lighter than they really are.
Themes are a different and much more complicated feature. It’s also much less critical compared to some other suggested features.
In any case, this topic is exactly for finding and fixing contrast issues, but implementing support for themes is not the way to fix it, at least not now.
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.
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.
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
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.
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.
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.