#34036: Low text contrast over light blue backgrounds in admin light theme
-------------------------------------+-------------------------------------
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.
--
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 django-updates+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/010701836e701ba3-fe70b602-423e-48b4-baa0-484d137395c9-000000%40eu-central-1.amazonses.com.
