#33727: Color contrast issues in admin header area
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage:
color contrast | Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Description changed by Thibaud Colas:
Old description:
> There are three color contrast issues in the Django admin area:
>
> - The `<h1>`’s yellow only has enough contrast against the blue for large
> text, which is defined by [https://www.w3.org/WAI/WCAG21/Understanding
> /contrast-minimum.html SC 1.4.3: Contrast (Minimum)] as 18pt and up
> (24px). This works for large viewports, but on smaller ones the heading’s
> font size is reduced to 20px / 1.25rem, which is too small to qualify as
> large text.
> - In light mode, the links’ hover color doesn’t have enough contrast with
> the background
> - In dark mode, same issue with the links’ hover color (but with a
> different color)
>
> Here is a [https://contrast-grid.eightshapes.com/?version=1.1.0
> &background-colors=%23417690%2C%20--header-bg&foreground-
> colors=%23f5dd5d%2C%20--accent%0D%0A%23264b5d%2C%20--
> primary%20(dark)%0D%0A%2379aec8%2C%20--primary%20(light)&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 contrast grid] with the relevant color contrasts.
>
> And a screenshot of two out of three issues:
>
>
> ---
>
> My recommended solutions for this are to:
>
> - Keep the "small viewport" heading at 24px
> - Change the hover effect for links in the header – either remove it
> (with the cursor change only), or remove the text underline rather than
> changing the color.
New description:
There are three color contrast issues in the Django admin area:
- The `<h1>`’s yellow only has enough contrast against the blue for large
text, which is defined by [https://www.w3.org/WAI/WCAG21/Understanding
/contrast-minimum.html SC 1.4.3: Contrast (Minimum)] as 18pt and up
(24px). This works for large viewports, but on smaller ones the heading’s
font size is reduced to 20px / 1.25rem, which is too small to qualify as
large text.
- In light mode, the links’ hover color doesn’t have enough contrast with
the background
- In dark mode, same issue with the links’ hover color (but with a
different color)
Here is a [https://contrast-grid.eightshapes.com/?version=1.1.0
&background-colors=%23417690%2C%20--header-bg&foreground-
colors=%23f5dd5d%2C%20--accent%0D%0A%23264b5d%2C%20--
primary%20(dark)%0D%0A%2379aec8%2C%20--primary%20(light)&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 contrast grid] with the relevant color contrasts.
And a screenshot of two out of three issues:
[[Image(https://code.djangoproject.com/raw-attachment/ticket/33727/admin-
contrast.png)]]
---
My recommended solutions for this are to:
- Keep the "small viewport" heading at 24px
- Change the hover effect for links in the header – either remove it (with
the cursor change only), or remove the text underline rather than changing
the color.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/33727#comment:1>
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/01070180de87023f-b343836b-43bf-4f4a-8f80-3974d522e4f9-000000%40eu-central-1.amazonses.com.
