Color contrast issues for admin icons

[Thibaud Colas]

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):

Link to the demo page I used to test this: ​django-admin-tests styleguide.

For icons, per ​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 ​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.

---

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

[Sarah Boyce]

Thank you Thibaud!