Opened 2 years ago

Closed 9 months ago

#34038 closed Bug (fixed)

Low text contrast and no visual cues for links within body text in admin UI

Reported by: Thibaud Colas Owned by: Dylan Patrick Go
Component: contrib.admin Version: 4.0
Severity: Normal Keywords: accessibility, color contrast, ux
Cc: William Claassen Triage Stage: Accepted
Has patch: no Needs documentation: no
Needs tests: no Patch needs improvement: no
Easy pickings: yes UI/UX: yes

Description (last modified by Mariusz Felisiak)

The Django admin’s light theme uses a light blue for links within text, with no other distinction of what is a link. This is problematic for two reasons:

  • The current shade of blue, #447e9b, doesn’t have enough contrast against the white body background.
  • For people with color blindness, there is no visual cue that a link is a link.

For those reasons, I would recommend:

  • Changing the link color of --link-fg. My recommendation would be to use an ever-so-slightly darker #437c98 (1% less lightness in HSL representation)

- Introduce an underline for all links within body text, so they can be identified unambiguously.

Change History (18)

comment:1 by Mariusz Felisiak, 2 years ago

Triage Stage: UnreviewedAccepted

comment:2 by William Claassen, 2 years ago

Cc: William Claassen added
Owner: changed from nobody to William Claassen
Status: newassigned

comment:3 by William Claassen, 2 years ago

Has patch: set

A pull request has been added: PR. This includes:

  • Changing the default colour to a slightly darkened in light mode (-1% lightness in HSL colour space) as requested
  • Adding underline on hover for all default links (add/create links, breadcrumbs...) to make links easier to identify

comment:4 by Mariusz Felisiak, 2 years ago

Patch needs improvement: set

comment:5 by Mariusz Felisiak, 2 years ago

Description: modified (diff)
Easy pickings: set
Owner: William Claassen removed
Status: assignednew

The new color have enough contrast when the background is white. Unfortunately --link-fg is also used with yellow (#ffffcc) and gray backgrounds (#f8f8f8). We should make it even darker to meet AA standards, e.g. #417893.

comment:6 by Mariusz Felisiak, 2 years ago

Has patch: unset
Owner: set to Nimra
Patch needs improvement: unset
Status: newassigned

comment:7 by Mariusz Felisiak, 2 years ago

Has patch: set
Triage Stage: AcceptedReady for checkin

comment:8 by Mariusz Felisiak <felisiak.mariusz@…>, 2 years ago

Resolution: fixed
Status: assignedclosed

In 1d0fa848:

Fixed #34038 -- Improved color contrast for links in admin.

comment:9 by Mariusz Felisiak, 13 months ago

Has patch: unset
Resolution: fixed
Status: closednew
Triage Stage: Ready for checkinAccepted

Reopen per Thibaud's comment. We need an underline and a better contrast.

comment:10 by Mariusz Felisiak, 13 months ago

Owner: Nimra removed
Status: newassigned

comment:11 by Mariusz Felisiak, 13 months ago

Status: assignednew

comment:12 by yushan, 13 months ago

Owner: set to yushan
Status: newassigned

comment:13 by yushan, 13 months ago

Has patch: set

comment:14 by Natalia Bidart, 10 months ago

Pasting the latest comment from the linked PR to re-puporse this ticket for providing admin link underlines:

We had a good chat about this at our latest @django/accessibility meeting.
We agreed that for now, we should just fix the colours and not add the underline.
We should still do the underline part, but as a new ticket, because:
 * The changes can easily be done separately.
 * Because of the difficulty in deciding what should and shouldn't be underlined, it's better to get the less contentious change out first.

comment:15 by Sarah Boyce, 10 months ago

Has patch: unset
Owner: yushan removed
Status: assignednew

comment:16 by Dylan Patrick Go, 9 months ago

Owner: set to Dylan Patrick Go
Status: newassigned

comment:17 by Dylan Patrick Go, 9 months ago

Has patch: set

comment:18 by Mariusz Felisiak, 9 months ago

Has patch: unset
Resolution: fixed
Status: assignedclosed

Thibaud, I don't see any contrast issues with the new color: #417893, so closing as fixed.

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