[Django] #34910: Color Contrast Admin Plus Icon
Django
-------------------------------------+-------------------------------------
Reporter: | Owner: nobody
laserhyena |
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 |
-------------------------------------+-------------------------------------
Identified using automated checks with Axe. When in Light Mode/Theme, Axe
reports a contrast ratio of 2.2:1 for the Django Admin's plus icon. For
icons, this should be at least 3:1, as seen in the W3C documentation for
Technique G207.
To reproduce, visit the Django Admin and locate one of the green plus
symbols. Potential new value for the green is represented by # 5fa225.
Please note the new green should result in acceptable color contrast for
both Light and Dark mode.
--
Ticket URL: <https://code.djangoproject.com/ticket/34910>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
-------------------------------------+-------------------------------------
| laserhyena
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: nobody => laserhyena
* status: new => assigned
* stage: Unreviewed => Accepted
Comment:
Thank you @laserhyena!
Link to technique:
https://www.w3.org/WAI/WCAG21/Techniques/general/G207.html
Comparison of before/after color, confirming the proposed shade: https
://contrast-grid.eightshapes.com/?version=1.1.0&background-
colors=%23121212%2CDark%0D%0A%23ffffff%2CWhite%0D%0A&foreground-
colors=83BC47%2CGreen%20as-is%0D%0A5fa225%2CGreen%20new&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
--
Ticket URL: <https://code.djangoproject.com/ticket/34910#comment:1>
Django
-------------------------------------+-------------------------------------
Reporter: laserhyena | Owner:
| laserhyena
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
Comment (by Hisham Mahmood):
Admin change icon needs better contrast too.
Comparison of before/after color, confirming the proposed shade: [https
://contrast-grid.eightshapes.com/?version=1.1.0&background-
colors=%23121212%2CDark%0D%0A%23ffffff%2CWhite%0D%0A&foreground-
colors=efb80b%2CYellow%20as-is%0D%0Ab48c08%2CYellow%20new&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].
--
Ticket URL: <https://code.djangoproject.com/ticket/34910#comment:2>
Django
-------------------------------------+-------------------------------------
| Mahmood
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* owner: laserhyena => Hisham Mahmood
* has_patch: 0 => 1
Comment:
Pull request: https://github.com/django/django/pull/17744
--
Ticket URL: <https://code.djangoproject.com/ticket/34910#comment:3>
Django
-------------------------------------+-------------------------------------
Reporter: laserhyena | Owner: Hisham
| Mahmood
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_better_patch: 0 => 1
Comment:
Setting as patch needs improvement following
[https://github.com/django/django/pull/17744/ Thibaud's comment].
--
Ticket URL: <https://code.djangoproject.com/ticket/34910#comment:4>
Django
-------------------------------------+-------------------------------------
Reporter: laserhyena | Owner: Hisham
| Mahmood
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: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* needs_better_patch: 1 => 0
Comment:
Setting after
[https://github.com/django/django/pull/17744#pullrequestreview-1830906380
clarification].
--
Ticket URL: <https://code.djangoproject.com/ticket/34910#comment:5>
Django
-------------------------------------+-------------------------------------
Reporter: laserhyena | Owner: Hisham
| Mahmood
Component: contrib.admin | Version: dev
Severity: Normal | Resolution: fixed
Keywords: accessibility, | Triage Stage: Accepted
color contrast |
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 1
-------------------------------------+-------------------------------------
* status: assigned => closed
* resolution: => fixed
Comment:
In [changeset:"8a1727dc7f66db7f0131d545812f77544f35aa57" 8a1727dc]:
{{{
#!CommitTicketReference repository=""
revision="8a1727dc7f66db7f0131d545812f77544f35aa57"
Fixed #34910 -- Improved color contrast for add/change icons in admin.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/34910#comment:6>