#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.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/010701836e70ca0e-7eb5a059-c6d8-40e2-b520-9d9090ef26c1-000000%40eu-central-1.amazonses.com.
