#29995: Make the technical error response more legible when using high contrast
mode
-------------------------------------+-------------------------------------
     Reporter:  Matthew Pava         |                    Owner:  Zach
         Type:                       |  Garwood
  Cleanup/optimization               |                   Status:  assigned
    Component:  Error reporting      |                  Version:  2.1
     Severity:  Normal               |               Resolution:
     Keywords:                       |             Triage Stage:  Accepted
    Has patch:  0                    |      Needs documentation:  0
  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 <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 post to this group, send email to django-updates@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/django-updates/064.6f14bcdfe8546db068a44f207219c031%40djangoproject.com.
For more options, visit https://groups.google.com/d/optout.

Reply via email to