[Django] #29995: Customize Technical Error Response Template
Django
------------------------------------------------+------------------------
Reporter: Matthew Pava | Owner: (none)
Type: Cleanup/optimization | Status: new
Component: Error reporting | Version: 2.1
Severity: Normal | Keywords:
Triage Stage: Unreviewed | Has patch: 0
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 0
UI/UX: 0 |
------------------------------------------------+------------------------
I really appreciate the error response, but I recently switched my display
to high-contrast mode. Unfortunately, the default color scheme for the
response template is not legible in high contrast mode. I envision two
paths here: Either allow full customization of the technical error
response template or choose a color scheme that will work effectively in
high-contrast mode and non-high-contrast mode.
--
Ticket URL: <https://code.djangoproject.com/ticket/29995>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
Django
Reporter: Matthew Pava | Owner: (none)
Cleanup/optimization |
Component: Error reporting | Version: 2.1
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Matthew Pava):
* Attachment "high-contrast-mode.png" added.
Screenshot of high-contrast mode technical error page
Django
Reporter: Matthew Pava | Owner: (none)
Cleanup/optimization |
Component: Error reporting | Version: 2.1
Keywords: | Triage Stage:
| Unreviewed
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Description changed by Matthew Pava:
Old description:
> I really appreciate the error response, but I recently switched my
> display to high-contrast mode. Unfortunately, the default color scheme
> for the response template is not legible in high contrast mode. I
> envision two paths here: Either allow full customization of the
> technical error response template or choose a color scheme that will work
> effectively in high-contrast mode and non-high-contrast mode.
New description:
I really appreciate the error response, but I recently switched my display
to high-contrast mode. Unfortunately, the default color scheme for the
response template is not legible in high contrast mode. I envision two
paths here: Either allow full customization of the technical error
response template or choose a color scheme that will work effectively in
high-contrast mode and non-high-contrast mode. I've added a screenshot so
that you can see what I'm seeing.
--
--
Ticket URL: <https://code.djangoproject.com/ticket/29995#comment:1>
Django
mode
--------------------------------------+------------------------------------
Reporter: Matthew Pava | Owner: (none)
Type: Cleanup/optimization | Status: new
Component: Error reporting | Version: 2.1
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Tim Graham):
* stage: Unreviewed => Accepted
Comment:
I don't have knowledge about how high contrast mode works but I guess it
should be possible for things to "just work".
--
Ticket URL: <https://code.djangoproject.com/ticket/29995#comment:2>
Django
mode
Reporter: Matthew Pava | Owner: Zach
Type: | Garwood
Cleanup/optimization | Status: assigned
Component: Error reporting | Version: 2.1
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Zach Garwood):
* status: new => assigned
* owner: (none) => Zach Garwood
Comment:
I'm currently learning more about accessibility best practices and would
love to tackle this issue.
--
Ticket URL: <https://code.djangoproject.com/ticket/29995#comment:3>
Django
mode
-------------------------------------+-------------------------------------
Reporter: Matthew Pava | Owner: Zach
Type: | Garwood
Cleanup/optimization | Status: assigned
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Zach Garwood):
* Attachment "Mac.png" added.
MacOS
Django
mode
-------------------------------------+-------------------------------------
Reporter: Matthew Pava | Owner: Zach
Type: | Garwood
Cleanup/optimization | Status: assigned
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Zach Garwood):
* Attachment "Windows.png" added.
Windows
Django
mode
-------------------------------------+-------------------------------------
Reporter: Matthew Pava | Owner: Zach
Type: | Garwood
Cleanup/optimization | Status: assigned
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Zach Garwood):
* Attachment "Chrome.png" added.
Chrome extension
Django
mode
-------------------------------------+-------------------------------------
Reporter: Matthew Pava | Owner: Zach
Type: | Garwood
Cleanup/optimization | Status: assigned
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Comment (by Zach Garwood):
Matthew, I think there may be an issue with your assistive tool. I took
screenshots using the built-in high contrast modes for Windows and MacOS,
as well as the official Chrome extension (see below), and they all seemed
to handle the pale yellow at the top of the page reasonably well. Matthew,
is it possible that your tool is misconfigured or possibly buggy?
All that being said, I looked at the text/background combinations found in
that template and used an [http://accessible-colors.com/ Accessible
Colors] tool recommended by the W3C's [https://www.w3.org/TR
/UNDERSTANDING-WCAG20/Overview.html WCAG] to determine how compliant they
are:
* #000 / #ffc (black on pale yellow):
**Passes AAA**
Required contrast ratio: 4.5
Your contrast ratio: 20.43
* #666 / #ffc (dark grey on pale yellow):
**Fails AAA**
Required contrast ratio: 7
Your contrast ratio: 5.59
Passes AAA if you change text color to #575757
New contrast ratio: 7.03
* #000 / #eee (black on grey):
**Passes AAA**
Required contrast ratio: 7
Your contrast ratio: 18.1
* #000 / #f6f6f6 (black on light grey):
**Passes AAA**
Required contrast ratio: 7
Your contrast ratio: 19.43
* #666 / #eee (dark grey on light grey):
**Fails AAA**
Required contrast ratio: 7
Your contrast ratio: 4.95
Passes AAA if you change text color to #4F4F4F
New contrast ratio: 7.06
* #505050 / #dfdfdf (dark grey on another dark grey):
**Fails AAA**
Required contrast ratio: 7
Your contrast ratio: 6.05
Passes AAA if you change background color to #EFEFEF
New contrast ratio: 7.01
OR
Passes AAA if you change text color to #464646
New contrast ratio: 7.08
I've submitted a [https://github.com/django/django/pull/10712 PR] to
address the failing low contrast color combinations.
Screenshots of various high contrast modes:
* Windows:
[[Image(https://code.djangoproject.com/raw-
attachment/ticket/29995/Windows.png)]]
* MacOS:
[[Image(https://code.djangoproject.com/raw-
attachment/ticket/29995/Mac.png)]]
* Chrome extension:
[[Image(https://code.djangoproject.com/raw-
attachment/ticket/29995/Chrome.png)]]
--
Ticket URL: <https://code.djangoproject.com/ticket/29995#comment:4>
Django
mode
-------------------------------------+-------------------------------------
Reporter: Matthew Pava | Owner: Zach
Type: | Garwood
Cleanup/optimization | Status: assigned
Keywords: | Triage Stage: Accepted
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Comment (by Matthew Pava):
I should have done more thorough checking. The debug page does in fact
produce legible results in the browser but not in Outlook 2010.
Apparently, Outlook 2010 has issues with high-contrast mode. I was able
to change to High-Contrast Mode 2 to make the admin email legible in
Outlook 2010.
Thanks, @Zach!
--
Ticket URL: <https://code.djangoproject.com/ticket/29995#comment:5>
Django
mode
-------------------------------------+-------------------------------------
Reporter: Matthew Pava | Owner: Zach
Type: | Garwood
Component: Error reporting | Version: 2.1
Keywords: | Triage Stage: Accepted
Has patch: 0 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Tim Graham):
* status: assigned => closed
* resolution: => invalid
--
Ticket URL: <https://code.djangoproject.com/ticket/29995#comment:6>
Django
mode
-------------------------------------+-------------------------------------
Reporter: Matthew Pava | Owner: Zach
Type: | Garwood
Component: Error reporting | Version: 2.1
Keywords: | Triage Stage: Ready for
| checkin
Has patch: 1 | Needs documentation: 0
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Tim Graham):
* status: closed => new
* has_patch: 0 => 1
* resolution: invalid =>
* stage: Accepted => Ready for checkin
Comment:
Discussion on the [https://github.com/django/django/pull/10712 PR] yielded
a consensus to use higher contrast colors, even if the original report
isn't an issue.
--
Ticket URL: <https://code.djangoproject.com/ticket/29995#comment:7>
Django
mode
-------------------------------------+-------------------------------------
Reporter: Matthew Pava | Owner: Zach
Type: | Garwood
Component: Error reporting | Version: 2.1
Keywords: | Triage Stage: Ready for
| checkin
Needs tests: 0 | Patch needs improvement: 0
Easy pickings: 0 | UI/UX: 0
Changes (by Tim Graham <timograham@…>):
* status: new => closed
* resolution: => fixed
Comment:
In [changeset:"19e863a844db137045499276f0b0494b180f3f1a" 19e863a8]:
{{{
#!CommitTicketReference repository=""
revision="19e863a844db137045499276f0b0494b180f3f1a"
Fixed #29995 -- Used higher contrast colors in debug page.
}}}
--
Ticket URL: <https://code.djangoproject.com/ticket/29995#comment:8>