Opened 17 months ago

Closed 7 months ago

Last modified 5 weeks ago

#34036 closed Bug (fixed)

Low text contrast over light blue backgrounds in admin light theme

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

Description (last modified by Thibaud Colas)

The Django admin’s light theme "primary" color is a very light shade of blue which doesn’t offer enough contrast when used with white text.

Here is a full contrast grid of the light theme color palette for reference. The problematic "light blue" combos I have identified are:

  1. Breadcrumbs text where the background --breadcrumbs-bg is light blue, and the text is either very light blue --breadcrumbs-fg, or white (both bad). We would need to either use a much darker shade of blue, or switch breadcrumbs text to a dark grey like --body-fg.
  2. Table "caption" headers, with light blue bg and a text of either --header-color light yellow for current app, or white --header-link-color, both bad. Here we might be able to resolve this by switching those headers to using the --header-bg / --secondary shade of blue. Or use dark grey --body-fg text.
  3. Fieldsets / modules h2 headers. Same as table caption headers.
  4. Choosers’ "chosen" header. Same as table caption headers.
  5. Non-"default" submit buttons. Here we won’t be able to use the secondary blue since it’s already used for default submit buttons. So we’d need to either change the primary color, or use a dark grey --body-fg text.

Here is a screenshot of a truncated form with those issues illustrated: https://code.djangoproject.com/raw-attachment/ticket/34036/34036.png

Attachments (1)

34036.png (216.7 KB ) - added by Thibaud Colas 17 months ago.
Screenshot of the Django admin with color contrast issues highlighted in red

Download all attachments as: .zip

Change History (20)

by Thibaud Colas, 17 months ago

Attachment: 34036.png added

Screenshot of the Django admin with color contrast issues highlighted in red

comment:1 by Thibaud Colas, 17 months ago

Description: modified (diff)

comment:2 by Mariusz Felisiak, 17 months ago

Triage Stage: UnreviewedAccepted

comment:3 by Mia Bajić, 17 months ago

Owner: changed from nobody to Mia Bajić
Status: newassigned

comment:4 by Nimra, 16 months ago

Owner: changed from Mia Bajić to Nimra

comment:5 by Mariusz Felisiak, 16 months ago

Has patch: set

comment:6 by Carlton Gibson, 16 months ago

Patch needs improvement: set

comment:7 by Jacob Walls, 15 months ago

Patch needs improvement: unset

comment:8 by Mariusz Felisiak, 15 months ago

Patch needs improvement: set

comment:9 by Mariusz Felisiak, 8 months ago

Owner: Nimra removed
Status: assignednew

comment:10 by Mariana, 8 months ago

Owner: set to Mariana
Status: newassigned

comment:11 by Sarah Boyce, 7 months ago

Patch needs improvement: unset

comment:12 by Mariusz Felisiak, 7 months ago

Patch needs improvement: set

comment:13 by Mariana, 7 months ago

Patch needs improvement: unset

comment:14 by Mariusz Felisiak, 7 months ago

Triage Stage: AcceptedReady for checkin

comment:15 by Mariusz Felisiak <felisiak.mariusz@…>, 7 months ago

Resolution: fixed
Status: assignedclosed

In 6ad2738a:

Fixed #34036 -- Improved color contrast in admin light theme.

Thanks Nimra for the initial patch.

comment:16 by Collin Anderson, 6 weeks ago

Hi All, it seems to me that a:link {color: var(--body-fg);} is a Django 5.0 regression. Why did that get changed from color: var(--link-fg); ? This might get fixed in #34038 for future versions, but having links default to being the same color as body text seems to me to be a big accessibility regression in Django 5.0.

comment:17 by Tom Carrick, 6 weeks ago

Colin, I agree that's a regression. On the PR you mention I've suggested only changing the colours so we can merge that faster. It should probably also be a release blocker.

in reply to:  17 comment:18 by Natalia Bidart, 5 weeks ago

Replying to Tom Carrick:

Colin, I agree that's a regression. On the PR you mention I've suggested only changing the colours so we can merge that faster. It should probably also be a release blocker.

I'll comment about this in the linked ticket #34038 but I did not want to leave this unanswered. In general I would advice on commenting on active/open tickets instead of closed tickets, referencing the closed tickets as necessary. Thank you!

in reply to:  16 comment:19 by Mariusz Felisiak, 5 weeks ago

Replying to Collin Anderson:

Hi All, it seems to me that a:link {color: var(--body-fg);} is a Django 5.0 regression. Why did that get changed from color: var(--link-fg); ? This might get fixed in #34038 for future versions, but having links default to being the same color as body text seems to me to be a big accessibility regression in Django 5.0.

Thanks for the report, I've created a separate ticket for this regression, #35121.

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