[Django] #34036: Low text contrast over light blue backgrounds in admin light theme
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 "primary" color is a very light shade of
blue which doesn’t offer enough contrast when used with white text.
Here is a [https://contrast-grid.eightshapes.com/?version=1.1.0
&background-colors=%23fff%2C%20body-bg%0D%0A%23417690%2C%20header-
bg%0D%0A%2379aec8%2C%20breadcrumbs-bg%0D%0A%23dfd%2C%20message-success-
bg%0D%0A%23ffc%2C%20message-warning-bg%0D%0A%23ffefef%2C%20message-error-
bg%0D%0A%23f8f8f8%2C%20darkened-bg%0D%0A%23e4e4e4%2C%20selected-
bg%0D%0A%2379aec8%2C%20button-bg%0D%0A%23609ab6%2C%20button-hover-
bg%0D%0A%23417690%2C%20default-button-bg%0D%0A%23205067%2C%20default-
button-hover-bg%0D%0A%23888%2C%20close-button-bg%0D%0A%23747474%2C
%20close-button-hover-bg%0D%0A%23ba2121%2C%20delete-button-
bg%0D%0A%23a41515%2C%20delete-button-hover-bg&foreground-
colors=%2379aec8%2C%20primary%0D%0A%23417690%2C%20secondary%0D%0A%23f5dd5d%2C%20accent%0D%0A%23fff%2C
%20primary-fg%0D%0A%23333%2C%20body-fg%0D%0A%23666%2C%20body-quiet-
color%0D%0A%23000%2C%20body-loud-color%0D%0A%23ffc%2C%20header-
color%0D%0A%23f5dd5d%2C%20header-branding-color%0D%0A%23fff%2C%20header-
link-color%0D%0A%23fff%2C%20breadcrumbs-link-fg%0D%0A%23c4dce8%2C
%20breadcrumbs-fg%0D%0A%23447e9b%2C%20link-fg%0D%0A%23036%2C%20link-hover-
color%0D%0A%235b80b2%2C%20link-selected-fg%0D%0A%23e8e8e8%2C%20hairline-
color%0D%0A%23ccc%2C%20border-color%0D%0A%23ba2121%2C%20error-
fg%0D%0A%23ffc%2C%20selected-row%0D%0A%23fff%2C%20button-fg&es-color-
form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-
form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-
form__show-contrast=dnp 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/34036>
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:
color contrast, ux | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* Attachment "34036.png" added.
Screenshot of the Django admin with color contrast issues highlighted in
red
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
color contrast, ux | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Old description:
> 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 [https://contrast-grid.eightshapes.com/?version=1.1.0
> &background-colors=%23fff%2C%20body-bg%0D%0A%23417690%2C%20header-
> bg%0D%0A%2379aec8%2C%20breadcrumbs-bg%0D%0A%23dfd%2C%20message-success-
> bg%0D%0A%23ffc%2C%20message-warning-bg%0D%0A%23ffefef%2C%20message-error-
> bg%0D%0A%23f8f8f8%2C%20darkened-bg%0D%0A%23e4e4e4%2C%20selected-
> bg%0D%0A%2379aec8%2C%20button-bg%0D%0A%23609ab6%2C%20button-hover-
> bg%0D%0A%23417690%2C%20default-button-bg%0D%0A%23205067%2C%20default-
> button-hover-bg%0D%0A%23888%2C%20close-button-bg%0D%0A%23747474%2C
> %20close-button-hover-bg%0D%0A%23ba2121%2C%20delete-button-
> bg%0D%0A%23a41515%2C%20delete-button-hover-bg&foreground-
> colors=%2379aec8%2C%20primary%0D%0A%23417690%2C%20secondary%0D%0A%23f5dd5d%2C%20accent%0D%0A%23fff%2C
> %20primary-fg%0D%0A%23333%2C%20body-fg%0D%0A%23666%2C%20body-quiet-
> color%0D%0A%23000%2C%20body-loud-color%0D%0A%23ffc%2C%20header-
> color%0D%0A%23f5dd5d%2C%20header-branding-color%0D%0A%23fff%2C%20header-
> link-color%0D%0A%23fff%2C%20breadcrumbs-link-fg%0D%0A%23c4dce8%2C
> %20breadcrumbs-fg%0D%0A%23447e9b%2C%20link-fg%0D%0A%23036%2C%20link-
> hover-color%0D%0A%235b80b2%2C%20link-selected-fg%0D%0A%23e8e8e8%2C
> %20hairline-color%0D%0A%23ccc%2C%20border-color%0D%0A%23ba2121%2C
> %20error-fg%0D%0A%23ffc%2C%20selected-row%0D%0A%23fff%2C%20button-fg&es-
> color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-
> form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-
> form__show-contrast=dnp 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.
New description:
Here is a screenshot of a truncated form with those issues illustrated:
https://code.djangoproject.com/raw-attachment/ticket/34036/34036.png
--
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:1>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:
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/34036#comment:2>
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
-------------------------------------+-------------------------------------
* owner: nobody => Mia Bajić
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:3>
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
-------------------------------------+-------------------------------------
* owner: Mia Bajić => Nimra
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Nimra
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:
[https://github.com/django/django/pull/16268 PR]
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:5>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Nimra
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/34036#comment:6>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Nimra
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: 1 => 0
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Nimra
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/34036#comment:8>
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
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* owner: Nimra => (none)
* status: assigned => new
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#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: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 1
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: (none) => Mariana
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:10>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mariana
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: 1 => 0
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:11>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mariana
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/34036#comment:12>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mariana
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: 1 => 0
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:13>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mariana
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:14>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mariana
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"6ad2738a8f32b94cbae742f212080fadf2dee421" 6ad2738a]:
{{{
#!CommitTicketReference repository=""
revision="6ad2738a8f32b94cbae742f212080fadf2dee421"
Fixed #34036 -- Improved color contrast in admin light theme.
Thanks Nimra for the initial patch.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:15>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mariana
Type: Bug | Status: closed
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:16>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mariana
Type: Bug | Status: closed
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:17>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mariana
Type: Bug | Status: closed
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Natalia Bidart):
Replying to [comment:17 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!
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:18>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mariana
Type: Bug | Status: closed
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Mariusz Felisiak):
Replying to [comment:16 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.
--
Ticket URL: <https://code.djangoproject.com/ticket/34036#comment:19>