Opened 2 years ago

Last modified 2 years ago

#33727 closed Bug

Color contrast issues in admin header area — at Version 1

Reported by: Thibaud Colas Owned by: nobody
Component: contrib.admin Version: dev
Severity: Normal Keywords: accessibility, color contrast
Cc: Triage Stage: Ready for checkin
Has patch: yes Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: yes

Description (last modified by Thibaud Colas)

There are three color contrast issues in the Django admin area:

  • The <h1>’s yellow only has enough contrast against the blue for large text, which is defined by SC 1.4.3: Contrast (Minimum) as 18pt and up (24px). This works for large viewports, but on smaller ones the heading’s font size is reduced to 20px / 1.25rem, which is too small to qualify as large text.
  • In light mode, the links’ hover color doesn’t have enough contrast with the background
  • In dark mode, same issue with the links’ hover color (but with a different color)

Here is a contrast grid with the relevant color contrasts.

And a screenshot of two out of three issues:

https://code.djangoproject.com/raw-attachment/ticket/33727/admin-contrast.png

---

My recommended solutions for this are to:

  • Keep the "small viewport" heading at 24px
  • Change the hover effect for links in the header – either remove it (with the cursor change only), or remove the text underline rather than changing the color.

Change History (2)

by Thibaud Colas, 2 years ago

Attachment: admin-contrast.png added

comment:1 by Thibaud Colas, 2 years ago

Description: modified (diff)
Note: See TracTickets for help on using tickets.
Back to Top