Cleared circle is not colourblind friendly

[rickdoesdev]

As a colourblind person with green deficient cones, I am really struggling with the cleared/uncleared status on the transactions row. Due to my eyes dropping a lot of the green information, I often struggle with low saturation greens and greys. As it is I can't tell if a transaction is cleared or not from looking at the circle, and given the checkmark is there regardless, there's no symbol clue either.

The blueish grey colour used for the uncleared status and the green used for the cleared status are not far enough away from each other and both are percieved as a vaguely greyish colour.

We should up the contrast between these two colours, and ideally chose a different symbol for "cleared" vs "uncleared" so we're not relying on colour queues alone.

I'd be happy to submit a PR to fix this, but we should have a discussion about which symbol replacement would work, and make sure we're happy with colour solutions. As the symbol is so small it's very difficult to find a set of colours for uncleared/cleared that are both 3:1 or more against the white background, while also preserving the "grey" and "green" intention and keeping the contrast between each of them distinct enough.

It's also possible there may need to be another presentation style entirely, something to indicate at the row level (similar to future scheduled transactions) and not relying on the tiny circle at the end to show so much state. even moving to something like a checkbox pattern of an empty dark grey border around a white area for uncleared,, replaced with a filled in green area+ checkmark for cleared.

I can do some mockups of the above suggestions if the devs have interest in it, but I wanted to at least raise the issue and see if any thought has been put into it yet.

[rickdoesdev]

Also I just asked my non-colourblind friend to assess and their first response was "It's really hard to see the difference between those colours" followed by "what does this do?" and when I explained it was for toggling cleared and uncleared they were confused why the checkmark symbol is used for both states, and that it's too small to easily see what is happening. So there's some struggle with "normal" users too! I really think we can fix this with a more obvious state transition from dark grey border hollow circle with no symbol, to a green filled circle with symbol.

[trevdor]

I agree that icon pairing needs some love! I've tried an idea for it but didn't love the result.
IMO, posting visual examples here to get the conversation going would be a great start.

[rich-howell]

@rickdoesdev I agree with @trevdor here, post some examples or open up a PR ans get the conversation started :)

[j-f1]

Maybe it could be just a green checkmark without the circle for the cleared state, or a checkmark surrounded by a stroked (not filled) circle for the uncleared state?

[rich-howell]

I would be interested to know, what colours are good for on and off states for people that can't see colour. If I had a red and green icon, would that appear the same in both the on and off states for example due to the saturation of the colour.

[j-f1]

I feel like it would be best to differentiate primarily via shape, with color being an added bonus but not required for understanding.

[rickdoesdev]

Shape is definitely better than colour for people with colour differentiation issues.

This is why you tend to get error / valid indicators with a red X and green check,; the colour is only some of the information, the symbol is the far more meaningful.

It's harder to solve colour as well given there are different kinds of colourblindness. I'm red / green, but there are also yellow / blue (or exceedingly rarely, complete colourblindness) and what isn't visible for me will be for the other type, and vice versa.

In my own experience saturation, proximity to other colours, and surface area definitely help me guess a colour. A 4px red square set 100px away from a 4px green square I probably won't be able to tell which is which. (Side note, this is why I hate form validation that just shows a 1px red or green border for validation state, I can't tell which it is!) A 20px red square next to a 20px green square and i'll probably be able to tell you which is which, even if I'm not seeing them right, I will have enough information to roughly guess. I'm only moderate severity though, some people have no green cones at all and would never be able to tell.

[rickdoesdev]

Thanks everyone! I'll do some mockups later today and maybe kick off the PR!

[trevdor]

I can't find ya in the Discord, @rickdoesdev, or I'd DM you these ideas.
Here are the ideas I was trying out: uncleared on the left, cleared on the right
Any of these strike you as better contrast? Or just use 'em as brainstorming fuel.

Note: I've scaled down to roughly the in-app dimensions, but I think we would do well to bump it up by at least 25%

[rickdoesdev]

I think going from a hollow circle (3rd on the left) to either of the top right two has the best transition. A state of nothing to a state of completed. The check persisting in both states is problematic as until you've interacted with it and seen there's a different state, it looks like you're already in a "done" state.

The problem with the empty circle is that it's not clear there's an action that needs to be taken, so first time users may not realise what the circle is for, but they will at least see the difference as soon as they do an import vs a manual entry, or curiously interact with the column and see the effect changes.

This touches on an another point; we should probably have some kind of hover state. Maybe just enough to show the state you'll wind up in if you click. (ie: hover over uncleared, show the check while hovered. hover over cleared, show the empty circle while hovered)

[rickdoesdev]

Also re discord, I'll see about getting that setup; thanks for messaging here in the meantime!

[rickdoesdev]

Got a mate to remind me what YNAB does; similar to the second option above, just with a C instead of check

[rickdoesdev]

I tried this other option which I kind of like with an ellipsis inside the circle to show a "waiting" state

I also have updated it to use a single border circle and I think it also looks pretty decent

What do we think? I like both options, and both options make it WAY more usable for me now!

I can make a PR with whichever one!

Edit: Polling people around me, empty circle seems to feel "cleaner" and there may be confusion that the ... is a menu. Will PR with the empty circle!

[rickdoesdev]

PR Created at #272

[rich-howell]

I am going to go ahead and lock this discussion as the PR for this RFC has now been merged, thaks for all your help with it.

Cheers
Rich