Anki Forums

Suggestion: Make feedback ticks easier to distinguish for colorblind users

I’m red-green colorblind and find the colors of the Hard and Good feedback tick marks (orange and green) nearly impossible to distinguish. This means I’m often unsure whether I’ve hit the right button and have to back up and undo – I’d say this happens maybe 2-3 times per review session. I can tell them apart if I have them side by side, but when one flashes up for half a second with no additional context, it’s pretty much hopeless.

Here’s a simulator prepopulated with the two colors currently being used so you can get a decent idea of what I mean.

The ticks for Again and Easy are fine – blue stands no risk of being confused with anything on the red-green side of the spectrum, and the red is both much darker and has a different symbol. To distinguish Hard and Good, we could use different symbols (always a good practice anyway), or add a texture, or use significantly different shades (light green and dark orange or vice versa).

The colors must have changed at some point during a redesign, because I’ve only started to notice this being an issue within the last year or so and I’ve been using AnkiMobile for a decade.

Back in '18 the hard button color was tweaked from cccc00 to cc7700. If changing it back would make things clear enough, I can put this in the next TestFlight build for you to try out

That definitely looks better in the color tester at least, and like I said I don’t remember this being a problem before, so I’m guessing that will do it!

Ok, let’s give that a go. Is changing the tick enough, or does the answer button color need adjusting as well?

The answer button is fine since there are other ways to distinguish those, and I likely wouldn’t notice either way, but all else being equal, for non-colorblind users I would think it would be less confusing for them to be the same.

Next beta should be available in a day or so; this option can be enabled from the Preferences>Review screen.

This is working great, except I’m not sure it’s distinguishable in night mode (which didn’t exist before). I need to use it a bit more before I can say for sure though I think.

That’s odd, as the same colors are used in both day and night mode AFAIR. Could you confirm?

Color perception differs quite a bit depending on the background, so it wasn’t too surprising to me.

That said, it appears night mode does indeed use different colors, or at least they display differently somehow. I took screenshots again and used a color picker and here’s what I got:

  • nighttime hard: #7a7a00
  • nighttime good: #008100
  • daytime hard: #e0e167

I double-checked the code, and there’s no separate color for nightmode. The tick is very quick - perhaps your screenshot was capturing it at different timings and caught some of the fading?

In any case, I can make the hard tick different in night mode if it’s difficult to see. How do you suggest I change the tick color to make it clearer?

That’s possible.

I don’t think there is any general guidance I can give you off the top of my head on what dimensions the color should be changed in, unfortunately. I see a couple ways we could proceed:

  • You could find a color-blind-friendly palette on the web somewhere and select colors directly from there, then try those.
  • If you want to give me the exact colors you’re using currently and an SVG of the tick mark, I could try to make a couple of mockups and see if I can get a better idea.

You have so far implemented this with an option in the settings. Is the plan to remove the option and have just one set of improved colors once we find them, or to permanently have two separate sets? If you specifically wanted to have a separate palette for the ticks/answer buttons, maybe this gets easier.

The plan is to keep a separate option so the existing aesthetics can be preserved. The option only affects the tick color - currently the answer button color does not change, as you said that’s fine :slight_smile:

1 = AA3333
2 = CC7700
alt 2 = CCCC00
3 = 00AA00
4 = 006CFF

I can provide the svg if you need it, but it’s just replaced with the color, so any shape should do for testing

The shape actually is important, as the amount of adjacent color makes a big difference in how easy it is to perceive differences in color.

If we’re making a separate mode for this, can we just add two more symbols? Like maybe a minus sign for hard and a plus sign for easy? Then we wouldn’t have to worry about the details of the colors so much.

Yes, that shouldn’t be too hard. How about I try restoring the old colors and switching to multiple icons in the next beta?

Sure, that sounds like a good start.