Opened 3 years ago
Last modified 3 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 )
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:
---
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 , 3 years ago
Attachment: | admin-contrast.png added |
---|
comment:1 by , 3 years ago
Description: | modified (diff) |
---|
Note:
See TracTickets
for help on using tickets.