Opened 3 months ago

Closed 3 months ago

Last modified 3 months ago

#33727 closed Bug (fixed)

Color contrast issues in admin header area

Reported by: Thibaud Colas Owned by: Mohammed Y. Alnajdi
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.

Attachments (1)

admin-contrast.png (18.3 KB) - added by Thibaud Colas 3 months ago.

Download all attachments as: .zip

Change History (10)

Changed 3 months ago by Thibaud Colas

Attachment: admin-contrast.png added

comment:1 Changed 3 months ago by Thibaud Colas

Description: modified (diff)

comment:2 Changed 3 months ago by Mariusz Felisiak

Easy pickings: set
Triage Stage: UnreviewedAccepted

Thanks for the report! Agreed, keeping 24px heading on smaller screens and removing text underline rather than changing the color sound good.

comment:3 Changed 3 months ago by Mohammed Y. Alnajdi

Owner: changed from nobody to Mohammed Y. Alnajdi
Status: newassigned

comment:5 Changed 3 months ago by Mariusz Felisiak

Has patch: set

comment:6 Changed 3 months ago by Mariusz Felisiak

Patch needs improvement: set

comment:7 Changed 3 months ago by Mariusz Felisiak

Patch needs improvement: unset
Triage Stage: AcceptedReady for checkin

comment:8 Changed 3 months ago by Mariusz Felisiak <felisiak.mariusz@…>

Resolution: fixed
Status: assignedclosed

In 78bf1565:

Fixed #33727 -- Fixed color contrasts in admin header.

comment:9 Changed 3 months ago by Mariusz Felisiak <felisiak.mariusz@…>

In 51de294d:

[4.1.x] Fixed #33727 -- Fixed color contrasts in admin header.

Backport of 78bf1565c37d0eef2ff9dd72a2cead0b772b2444 from main

Note: See TracTickets for help on using tickets.
Back to Top