Color contrast issues in admin header area

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

---

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.

[Mariusz Felisiak]

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

[Mohammed Y. Alnajdi]

​https://github.com/django/django/pull/15715

[Mariusz Felisiak <felisiak.mariusz@…>]

In 78bf1565:

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

[Mariusz Felisiak <felisiak.mariusz@…>]

In 51de294d:

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

Backport of 78bf1565c37d0eef2ff9dd72a2cead0b772b2444 from main