[Django] #36933: Yes/no admin icons hard to differentiate with dichromatic viewing deficiency

[Django]

#36933: Yes/no admin icons hard to differentiate with dichromatic viewing
deficiency
-------------------------------+-----------------------------------------
Reporter: Paul K. Gerke | Type: Uncategorized
Status: new | Component: Uncategorized
Version: 6.0 | Severity: Normal
Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------+-----------------------------------------
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/36933>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#36933: Yes/no admin icons hard to differentiate with dichromatic viewing
deficiency
-------------------------------+--------------------------------------

Reporter: Paul K. Gerke | Owner: (none)

Type: Uncategorized | Status: new
Component: Uncategorized | Version: 6.0

Severity: Normal | Resolution:

Keywords: | Triage Stage: Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------+--------------------------------------

Description changed by Paul K. Gerke:

Old description:

> 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.

New description:

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.

--

--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:1>

[Django]

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

-------------------------------------+-------------------------------------

Reporter: Paul K. Gerke | Owner: (none)

Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:

| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1

-------------------------------------+-------------------------------------
Changes (by Antoliny):

* component: Uncategorized => contrib.admin
* keywords: => accessibility
* type: Uncategorized => Cleanup/optimization

--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:2>

[Django]

#36933: Yes/no admin icons hard to differentiate with dichromatic viewing
deficiency
-------------------------------------+-------------------------------------
Reporter: Paul K. Gerke | Owner: (none)
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by 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!)
--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:3>

[Django]

#36933: Yes/no admin icons hard to differentiate with dichromatic viewing
deficiency
-------------------------------------+-------------------------------------
Reporter: Paul K. Gerke | Owner: (none)
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Antoliny):

* cc: Antoliny (added)

--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:4>

[Django]

#36933: Yes/no admin icons hard to differentiate with dichromatic viewing
deficiency
-------------------------------------+-------------------------------------
Reporter: Paul K. Gerke | Owner: (none)
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by SrinjoyeeDey):

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.
--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:5>

[Django]

#36933: Yes/no admin icons hard to differentiate with dichromatic viewing
deficiency
-------------------------------------+-------------------------------------
Reporter: Paul K. Gerke | Owner: (none)
Type: | Status: new
Cleanup/optimization |
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by 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!
--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:6>

[Django]

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

--------------------------------------+------------------------------------

Reporter: Paul K. Gerke | Owner: (none)

Type: Cleanup/optimization | Status: new

Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:

Keywords: accessibility | Triage Stage: Accepted

Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1

--------------------------------------+------------------------------------
Changes (by Antoliny):

* stage: Unreviewed => Accepted

Comment:

Replying to [comment:6 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!
--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:7>

[Django]

#36933: Yes/no admin icons hard to differentiate with dichromatic viewing
deficiency
--------------------------------------+------------------------------------
Reporter: Paul K. Gerke | Owner: (none)
Type: Cleanup/optimization | Status: new
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
--------------------------------------+------------------------------------

Comment (by 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:8>

[Django]

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

-------------------------------------+-------------------------------------
Reporter: Paul K. Gerke | Owner: Paul K.
Type: | Gerke
Cleanup/optimization | Status: assigned

Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1

-------------------------------------+-------------------------------------
Changes (by Paul K. Gerke):

* owner: (none) => Paul K. Gerke
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:9>

[Django]

#36933: Yes/no admin icons hard to differentiate with dichromatic viewing
deficiency
-------------------------------------+-------------------------------------
Reporter: Paul K. Gerke | Owner: Paul K.
Type: | Gerke
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by 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
--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:10>

[Django]

#36933: Yes/no admin icons hard to differentiate with dichromatic viewing
deficiency
-------------------------------------+-------------------------------------
Reporter: Paul K. Gerke | Owner: Paul K.
Type: | Gerke
Cleanup/optimization | Status: assigned
Component: contrib.admin | Version: 6.0
Severity: Normal | Resolution:
Keywords: accessibility | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------

Comment (by 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/36933#comment:11>