Yes/no admin icons hard to differentiate with dichromatic viewing deficiency

[Paul K. Gerke]

I am working on a project which uses a list of yes/no icons:

See here: ​https://www.craftware.info/projects/share/public/django-admin-icons.png

I really have a hard time to process these icons. I think, yes/no buttons are the most basic type that should be easy to view for people like me as well.

I do not know if there is a design guide for django, I only know that these admin yes/no icons are seemingly taken from the font-awesome free set? If that is the case, may I suggest to switch over to the "square check" version for the "yes" icon? That would change the shape of the icon, making it easy for people like me to see the difference.

See ​https://fontawesome.com/search?q=yes&ic=free-collection for an overview of the checkmark versions in the free font-awesome library.

Happy to fix this myself if this is greenlit, not knowing the etiquette here as this is my first issue.

[Antoliny]

Thank you for reporting Paul :)

Could you help me understand this issue better?

When using the current circle shape, are you able to distinguish between "yes" and "no" using the "checkmark" and "X" symbols inside the circle?

And when changing only the shape from circle to square, what specific difference makes it easier to distinguish between the two?

I apologize if these questions seem unnecessary — I'd just like to understand and approach the problem from your perspective as well!
(If you're willing to work on this, feel free to assign yourself to this issue!)

[Srinjoyee_Dey]

Hii, i can reproduce this issue... and make the most optimized solution. If no one is working on it i would love to take this issue.

[Paul K. Gerke]

Hi, I am, of course, happy to explain!

When using the current circle shape, are you able to distinguish between "yes" and "no" using the "checkmark" and "X" symbols inside the circle?
And when changing only the shape from circle to square, what specific difference makes it easier to distinguish between the two?

For me, as for others affected, the contrast ratio between green and red is very muted. A coarse test, that is valid for all color viewing deficiencies, is to simply convert the image to grayscale. For your convenience:

​https://www.craftware.info/projects/share/public/django-admin-icons-grayscale.png

As you can see, the brightness and shape of the symbol remains, but both are relatively similar:

• The gray tones are close, different but too close for skimming
• Both symbols, are essential "a round thing with something white inside"

The ideal solution would be one that takes both these properties to and exaggerates their differences. That is how I can to the suggestion to change the shape between the two symbols. I imagine that changing the outer shape of one of the symbols to a rectangle will make that symbol cover more area and therefore it appears darker (more dark pixels in total), and secondly it the outer shape of the symbol also is changed so that one now can distinguish rect/round as well. (I also read somewhere that people with viewing deficiencies are seemingly more trained to recognize shapes than color, but that is only half-knowledge of mine).

Since I had GIMP open already, here a coarse simulation of what that would look like:

​https://www.craftware.info/projects/share/public/django-admin-icons-grayscale-rects.png

---

@Srinjoyee_Dey - If we all agree on the issue/solution, you are more than welcome to take it out of my hands, if you want!

[Antoliny]

Replying to Paul K. Gerke:

For me, as for others affected, the contrast ratio between green and red is very muted. A coarse test, that is valid for all color viewing deficiencies, is to simply convert the image to grayscale. For your convenience:

​https://www.craftware.info/projects/share/public/django-admin-icons-grayscale.png

As you can see, the brightness and shape of the symbol remains, but both are relatively similar:

• The gray tones are close, different but too close for skimming
• Both symbols, are essential "a round thing with something white inside"

The ideal solution would be one that takes both these properties to and exaggerates their differences. That is how I can to the suggestion to change the shape between the two symbols. I imagine that changing the outer shape of one of the symbols to a rectangle will make that symbol cover more area and therefore it appears darker (more dark pixels in total), and secondly it the outer shape of the symbol also is changed so that one now can distinguish rect/round as well. (I also read somewhere that people with viewing deficiencies are seemingly more trained to recognize shapes than color, but that is only half-knowledge of mine).

Since I had GIMP open already, here a coarse simulation of what that would look like:

​https://www.craftware.info/projects/share/public/django-admin-icons-grayscale-rects.png

Thank you for the great explanation! It really helped me understand the issue. So the key point is that the icons should be distinguishable by shape alone, even without relying on color!

[Paul K. Gerke]

Thank you for the great explanation! It really helped me understand the issue. So the key point is that the icons should be distinguishable by shape alone, even without relying on color!

Yes, I think so. If you agree with the proposal here, I could fix this for the yes/no case. This involves changing, two icons from what I see, the dark and "normal" one for the icon-yes.

I now also took a minute to go over the remaining icons in ​https://github.com/django/django/tree/main/django/contrib/admin/static/admin/img but from the looks of it, the yes/no case seems to be the most important case where icons would appear side by side.

The icon-unknown one also seems quite possible (database entry blank/unset, I would assume), but font-awesome does not offer a good alternative here and I also do not want to bloat this simple issue with other design stuff for now.

---

I will create a PR as it seems we zeroed in that this is an acceptable solution? If not feel free to close it/ignore it.

[Paul K. Gerke]

Short update: Ran out of time for today with finishing the PR today because of the need of screenshots...

Parked it as a PR against my own repo for now ​https://github.com/MrApplejuice/django/pull/1

[Jacob Walls]

So the key point is that the icons should be distinguishable by shape alone, even without relying on color!

And especially without relying on green-red variance, as I understand that it's the most common anomaly in color perception.

[Youssef Tarek Ali]

Hi Paul, I'm interested in helping with this A11y improvement. Do you need any help with the SVGs or testing, or are you still planning to submit your PR soon?

[Jacob Walls]

Ran out of time for today while finishing the PR because of the need of screenshots...

There's a tool for generating them automatically ​here, if that helps.

[Paul K. Gerke]

Hey Jacob... Oh man, that is epic! Thank you so much, yes that helps me actually a lot. I wondered how I would generate the screenshots, and for various reasons it was not so easy to pull them into our app as I thought and I got a bit stuck there and then.

It is evening where I am now, give me 12 hours, I will give the playground a shot then... also damn, already 2 weeks have passed now, sorry everyone!

[Paul K. Gerke]

First of all thank you to Jacob Walls again for the admin-playground thing! That helped a lot. Setting things up was a bit more of an ordeal though than I had hoped for.

I spent another 1.5 hours tuning the exact layout of the rectangles now and finally the PR is submitted!

[Paul K. Gerke]

PR: ​https://github.com/django/django/pull/20842