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 )
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 , 2 years ago
Triage Stage: | Unreviewed → Accepted |
---|
comment:2 by , 2 years ago
Cc: | added |
---|---|
Owner: | changed from | to
Status: | new → assigned |
comment:3 by , 2 years ago
Has patch: | set |
---|
comment:4 by , 2 years ago
Patch needs improvement: | set |
---|
comment:5 by , 2 years ago
Description: | modified (diff) |
---|---|
Easy pickings: | set |
Owner: | removed |
Status: | assigned → new |
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 , 2 years ago
Has patch: | unset |
---|---|
Owner: | set to |
Patch needs improvement: | unset |
Status: | new → assigned |
comment:9 by , 13 months ago
Has patch: | unset |
---|---|
Resolution: | fixed |
Status: | closed → new |
Triage Stage: | Ready for checkin → Accepted |
Reopen per Thibaud's comment. We need an underline and a better contrast.
comment:10 by , 13 months ago
Owner: | removed |
---|---|
Status: | new → assigned |
comment:11 by , 13 months ago
Status: | assigned → new |
---|
comment:12 by , 13 months ago
Owner: | set to |
---|---|
Status: | new → assigned |
comment:14 by , 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 , 10 months ago
Has patch: | unset |
---|---|
Owner: | removed |
Status: | assigned → new |
comment:16 by , 9 months ago
Owner: | set to |
---|---|
Status: | new → assigned |
comment:18 by , 9 months ago
Has patch: | unset |
---|---|
Resolution: | → fixed |
Status: | assigned → closed |
Thibaud, I don't see any contrast issues with the new color: #417893
, so closing as fixed.
A pull request has been added: PR. This includes: