#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 [email protected].
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.
