[Django] #34037: Low text contrast for grey buttons in admin light theme

[Django]

#34037: Low text contrast for grey buttons in admin light theme
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: | Status: new
Uncategorized |
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 mid-grey backgrounds for the "object
tools" and "cancel" buttons, which doesn’t offer enough contrast combined
with their 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.

This can be fixed by changing the one `--close-button-bg` variable I
believe. I would recommend setting it to `#747474`, currently used for
those buttons’ hover state, and switch the hover state to use a much
darker `#333` instead.

--
Ticket URL: <https://code.djangoproject.com/ticket/34037>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.

[Django]

#34037: Low text contrast for grey buttons in admin light theme
-------------------------------------+-------------------------------------

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
-------------------------------------+-------------------------------------

Changes (by Thibaud Colas):

* type: Uncategorized => Bug

--
Ticket URL: <https://code.djangoproject.com/ticket/34037#comment:1>

[Django]

#34037: Low text contrast for grey buttons in admin light theme
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
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
-------------------------------------+-------------------------------------

Changes (by Mariusz Felisiak):

* stage: Unreviewed => Accepted

--
Ticket URL: <https://code.djangoproject.com/ticket/34037#comment:2>

[Django]

#34037: Low text contrast for grey buttons in admin light theme
-------------------------------------+-------------------------------------

Reporter: Thibaud Colas | Owner: Mia Bajić
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
-------------------------------------+-------------------------------------

Changes (by Mia Bajić):

* owner: nobody => Mia Bajić
* status: new => assigned

--
Ticket URL: <https://code.djangoproject.com/ticket/34037#comment:3>

[Django]

#34037: Low text contrast for grey buttons in admin light theme
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mia Bajić):

* has_patch: 0 => 1

Comment:

PR: https://github.com/django/django/pull/16105

--
Ticket URL: <https://code.djangoproject.com/ticket/34037#comment:4>

[Django]

#34037: Low text contrast for grey buttons in admin light theme
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić
Type: Bug | Status: assigned
Component: contrib.admin | Version: 4.0
Severity: Normal | Resolution:

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
-------------------------------------+-------------------------------------

Changes (by Mariusz Felisiak):

* stage: Accepted => Ready for checkin

--
Ticket URL: <https://code.djangoproject.com/ticket/34037#comment:5>

[Django]

#34037: Low text contrast for grey buttons in admin light theme
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mia Bajić

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
-------------------------------------+-------------------------------------

Changes (by GitHub <noreply@…>):

* status: assigned => closed
* resolution: => fixed

Comment:

In [changeset:"50096a3a7ad777fae2179bf8b20ce386b337f247" 50096a3a]:
{{{
#!CommitTicketReference repository=""
revision="50096a3a7ad777fae2179bf8b20ce386b337f247"
Fixed #34037 -- Improved color contrast for close buttons in admin.
}}}

--
Ticket URL: <https://code.djangoproject.com/ticket/34037#comment:6>