[Django] #34038: Low text contrast and no visual cues for links within body text in admin UI
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: Bug | Status: new
Component: | Version: 4.0
contrib.admin | Keywords: accessibility,
Severity: Normal | color contrast, ux
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/34038>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* stage: Unreviewed => Accepted
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:1>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* cc: William (added)
* owner: nobody => William
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:2>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: William
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* has_patch: 0 => 1
Comment:
A pull request has been added:
[https://github.com/django/django/pull/16101 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
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:3>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: William
| Claassen
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Has patch: 1 | Needs documentation: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:4>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* owner: William Claassen => (none)
* status: assigned => new
* easy: 0 => 1
Old description:
> 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.
New description:
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.~~
--
Comment:
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`.
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:5>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* owner: (none) => Nimra
* needs_better_patch: 1 => 0
* has_patch: 1 => 0
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:6>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Nimra
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
color contrast, ux | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* has_patch: 0 => 1
* stage: Accepted => Ready for checkin
Comment:
[https://github.com/django/django/pull/16378 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Nimra
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution: fixed
Keywords: accessibility, | Triage Stage: Ready for
color contrast, ux | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"1d0fa848e084cad62d0bb6bde3b51e4862558e57" 1d0fa848]:
{{{
#!CommitTicketReference repository=""
revision="1d0fa848e084cad62d0bb6bde3b51e4862558e57"
Fixed #34038 -- Improved color contrast for links in admin.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:8>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Nimra
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
color contrast, ux |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: closed => new
* has_patch: 1 => 0
* resolution: fixed =>
* stage: Ready for checkin => Accepted
Comment:
Reopen per [https://code.djangoproject.com/ticket/34917#comment:5
Thibaud's comment]. We need an underline and a better contrast.
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:9>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* owner: Nimra => (none)
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:10>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: (none)
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* status: assigned => new
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:11>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: (none) => yushan
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:12>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: yushan
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by yushan):
* has_patch: 0 => 1
Comment:
[https://github.com/django/django/pull/17419 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:13>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: yushan
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Natalia Bidart):
Pasting
[https://github.com/django/django/pull/17419#pullrequestreview-1820021243
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.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:14>
Django
-------------------------------------+-------------------------------------
Type: Bug | Status: new
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: yushan => (none)
* status: assigned => new
* has_patch: 1 => 0
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:15>
Django
-------------------------------------+-------------------------------------
| Patrick Go
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: (none) => Dylan Patrick Go
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:16>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Dylan
| Patrick Go
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Dylan Patrick Go):
* has_patch: 0 => 1
Comment:
[https://github.com/django/django/pull/17825 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:17>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Dylan
| Patrick Go
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution: fixed
Keywords: accessibility, | Triage Stage: Accepted
color contrast, ux |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* has_patch: 1 => 0
* resolution: => fixed
Comment:
Thibaud, I don't see any contrast issues with the new color: `#417893`, so
closing as fixed.
--
Ticket URL: <https://code.djangoproject.com/ticket/34038#comment:18>