[Django] #33727: Color contrast issues in admin header area
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud | Owner: nobody
Colas |
Type: Bug | Status: new
Component: | Version: dev
contrib.admin | Keywords: accessibility,
Severity: Normal | color contrast
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 1 |
-------------------------------------+-------------------------------------
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.
--
Ticket URL: <https://code.djangoproject.com/ticket/33727>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
-------------------------------------+-------------------------------------
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
-------------------------------------+-------------------------------------
* Attachment "admin-contrast.png" added.
Django
-------------------------------------+-------------------------------------
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
-------------------------------------+-------------------------------------
Old description:
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
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: nobody
Type: Bug | Status: new
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
color contrast |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* easy: 0 => 1
* stage: Unreviewed => Accepted
Comment:
Thanks for the report! Agreed, keeping 24px heading on smaller screens and
removing text underline rather than changing the color sound good.
--
Ticket URL: <https://code.djangoproject.com/ticket/33727#comment:2>
Django
-------------------------------------+-------------------------------------
| Y. Alnajdi
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: nobody => Mohammed Y. Alnajdi
* status: new => assigned
--
Ticket URL: <https://code.djangoproject.com/ticket/33727#comment:3>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mohammed
| Y. Alnajdi
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast |
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Mohammed Y. Alnajdi):
https://github.com/django/django/pull/15715
--
Ticket URL: <https://code.djangoproject.com/ticket/33727#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mohammed
| Y. Alnajdi
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast |
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* has_patch: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/33727#comment:5>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mohammed
| Y. Alnajdi
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
Keywords: accessibility, | Triage Stage: Accepted
color contrast |
Has patch: 1 | Needs documentation: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* needs_better_patch: 0 => 1
--
Ticket URL: <https://code.djangoproject.com/ticket/33727#comment:6>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mohammed
| Y. Alnajdi
Type: Bug | Status: assigned
Component: contrib.admin | Version: dev
Severity: Normal | Resolution:
color contrast | checkin
Has patch: 1 | Needs documentation: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Changes (by Mariusz Felisiak):
* needs_better_patch: 1 => 0
* stage: Accepted => Ready for checkin
--
Ticket URL: <https://code.djangoproject.com/ticket/33727#comment:7>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mohammed
| Y. Alnajdi
Component: contrib.admin | Version: dev
Severity: Normal | Resolution: fixed
Keywords: accessibility, | Triage Stage: Ready for
color contrast | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"78bf1565c37d0eef2ff9dd72a2cead0b772b2444" 78bf1565]:
{{{
#!CommitTicketReference repository=""
revision="78bf1565c37d0eef2ff9dd72a2cead0b772b2444"
Fixed #33727 -- Fixed color contrasts in admin header.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/33727#comment:8>
Django
-------------------------------------+-------------------------------------
Reporter: Thibaud Colas | Owner: Mohammed
| Y. Alnajdi
Type: Bug | Status: closed
Component: contrib.admin | Version: dev
Severity: Normal | Resolution: fixed
Keywords: accessibility, | Triage Stage: Ready for
color contrast | checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 1 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Mariusz Felisiak <felisiak.mariusz@…>):
In [changeset:"51de294d774b0f95a50d1feeb01614a8537cec6e" 51de294d]:
{{{
#!CommitTicketReference repository=""
revision="51de294d774b0f95a50d1feeb01614a8537cec6e"
[4.1.x] Fixed #33727 -- Fixed color contrasts in admin header.
Backport of 78bf1565c37d0eef2ff9dd72a2cead0b772b2444 from main
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/33727#comment:9>