#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.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion visit
https://groups.google.com/d/msgid/django-updates/01070192fe37f0eb-30d2ee19-dfde-4eb6-9662-3c54ad289edb-000000%40eu-central-1.amazonses.com.
