[Django] #35888: Color contrast issues for admin icons

[Django]

#35888: Color contrast issues for admin icons
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Type: Bug
Status: new | Component:
| contrib.admin
Version: 5.0 | Severity: Normal
Keywords: accessibility, | Triage Stage:
contrast, icons, wcag, svg | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
There are a lot of icons in the Django admin that don’t have enough
contrast against their background. This is particularly the case for icons
used as part of the messages functionality of Django, though this is
present in a lot of other icons across the admin.

Here are examples:

- "Success" check icon, `#70bf2b` on `#dfd`, contrast of 2.11:1
- "Warning" icon, `#efb80b` on `#ffc`, contrast of 1.77:1


Here’s a representation of all theoretical contrast issues (large image):

For icons, per [https://www.w3.org/WAI/WCAG22/quickref/#non-text-contrast
WCAG SC 1.4.11 Non-text Contrast], the minimum required "icon to
background" contrast is 3:1. However I’d argue it would be better for end
users and simpler for contributors to manage if Django used the same 4.5:1
minimum as [https://www.w3.org/WAI/WCAG22/quickref/#contrast-minimum SC
1.4.3 Contrast (Minimum)] (meant for text). While 3:1 could be enough in
some cases, Django has quite a lot of UI components that are identified by
icons only, and those icons tend to be small.

Link to the demo page I used to test this: [https://django-admin-
tests.netlify.app/django_admin_tests/latest/english/admin/styleguide/
django-admin-tests styleguide].

---

To fix this, I would recommend to start a transition away from icons as
external files. With more modern approaches to icons definitions, it’ll be
possible to better style the icon graphics according to the UI component
state and admin theming.

For the problem at hand – it’ll be sufficient to do a first step of
converting all icons defined in CSS with the `background` or `background-
image` properties, to the [https://developer.mozilla.org/en-
US/docs/Web/CSS/mask-image mask-image] property. This makes it possible to
define the icon’s color in CSS, so we can then apply theme-specific colors
for the icons.

Note for some of the icons – this will require moving away from sprite
techniques.
--
Ticket URL: <https://code.djangoproject.com/ticket/35888>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#35888: Color contrast issues for admin icons
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: (none)

Type: Bug | Status: new
Component: contrib.admin | Version: 5.0

Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage:
contrast, icons, wcag, svg | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Thibaud Colas):

* Attachment "Django icons color contrast issues.png" added.

[Django]

#35888: Color contrast issues for admin icons
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
contrast, icons, wcag, svg | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Description changed by Thibaud Colas:

Old description:

New description:

There are a lot of icons in the Django admin that don’t have enough
contrast against their background. This is particularly the case for icons
used as part of the messages functionality of Django, though this is
present in a lot of other icons across the admin.

Here are examples:

- "Success" check icon, `#70bf2b` on `#dfd`, contrast of 2.11:1
- "Warning" icon, `#efb80b` on `#ffc`, contrast of 1.77:1

Here’s a representation of all theoretical contrast issues (large image):

[[Image(https://code.djangoproject.com/raw-
attachment/ticket/35888/Django%20icons%20color%20contrast%20issues.png)]]

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

[Django]

#35888: Color contrast issues for admin icons
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: (none)
Type: Bug | Status: new
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:

Keywords: accessibility, | Triage Stage: Accepted
contrast, icons, wcag, svg |

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

Changes (by Sarah Boyce):

* stage: Unreviewed => Accepted

Comment:

Thank you Thibaud!
--
Ticket URL: <https://code.djangoproject.com/ticket/35888#comment:2>

[Django]

#35888: Color contrast issues for admin icons
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: Sarah
| Sanger
Type: Bug | Status: assigned

Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
contrast, icons, wcag, svg |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Sanger):

* owner: (none) => Sarah Sanger
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/35888#comment:3>

[Django]

#35888: Color contrast issues for admin icons
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Sarah
| Sanger
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
contrast, icons, wcag, svg |

Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Sarah Sanger):

* has_patch: 0 => 1

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

[Django]

#35888: Color contrast issues for admin icons
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Sarah
| Sanger
Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
contrast, icons, wcag, svg |
Has patch: 1 | Needs documentation: 0

Needs tests: 0 | Patch needs improvement: 1

Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Sarah Boyce):

* needs_better_patch: 0 => 1

--
Ticket URL: <https://code.djangoproject.com/ticket/35888#comment:5>
Django <https://code.djangoproject.com/>
The web framework for perfectionists with deadlines.

[Django]

#35888: Color contrast issues for admin icons
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: Jeanette
| O'Brien

Type: Bug | Status: assigned
Component: contrib.admin | Version: 5.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
contrast, icons, wcag, svg |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------

Changes (by Jeanette O'Brien):

* owner: Sarah Sanger => Jeanette O'Brien

--
Ticket URL: <https://code.djangoproject.com/ticket/35888#comment:6>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.