Issue metadata
Sign in to add a comment
|
contrast of default form controls fail WCAG 2.0 color contrast guidelines
Reported by
all...@tsbvi.edu,
Jun 1 2017
|
||||||||||||||||||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36 Example URL: http://w3c.github.io/low-vision-SC/luminosity-form-controls.html Steps to reproduce the problem: 1. go to http://w3c.github.io/low-vision-SC/luminosity-form-controls.html 2. test with color contrast tool to verify contrast ratios 3. What is the expected behavior? borders around form controls should be 4.5:1 What went wrong? form controls rendered with poor contrast Does it occur on multiple sites: Yes Is it a problem with a plugin? No Did this work before? No Does this work in other browsers? No Safari (all), Firefox (all) Chrome version: 58.0.3029.110 Channel: stable OS Version: 6.1 (Windows 7, Windows Server 2008 R2) Flash Version: This is a HUGE issue for over 60 folks, folks with low vision.
,
Jun 1 2017
Apologies... expected behavior should be borders around form controls should be 4.5:1 (not 5:1)
,
Jun 2 2017
,
Jun 5 2017
@allanj-- Could you please provide us the link of the contrast tool and clear steps to reproduce the issue nd expected result screenshot , that would really help us in triaging the issue better. Thanks!
,
Jun 15 2017
Tool for windows and mac .. www.paciellogroup.com/resources/contrastanalyser/ http://w3c.github.io/low-vision-SC/luminosity-form-controls.html shows the results of contrast between the control and page backgound with no CSS on the form controls. See the last section on the page for exemplars of expected default rendering by a browser (note: CSS has been applied to show the minimum contrast necessary to meet WCAG contrast guidelines). Expected rendering is that the browser as a default would render form controls to meet the guidelines.
,
Jun 15 2017
Thank you for providing more feedback. Adding requester "hdodda@chromium.org" to the cc list and removing "Needs-Feedback" label. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Jun 22 2017
Tested the issue on windows 7 using chrome M59 #59.0.3071.109 and latest canary M61 #61.0.3138.0 and followed below steps : 1. Downloaded and installed color contrast analyser from "www.paciellogroup.com/resources/contrastanalyser/". 2. Opened "http://w3c.github.io/low-vision-SC/luminosity-form-controls.html" and observed the color contrast values in tool. Attached screencast for reference. @aboxhall-- Could you please help us in reproducing the issue , if we have missed any steps in reproducing the issue , also help us in triaging the issue. Thanks!
,
Jul 27 2017
,
Aug 1 2017
Removing from Bisect bucket since TE was not able to repro.
,
Aug 7 2017
,
Aug 8 2017
I'm not sure I agree there is an issue here. Regarding non-disabled controls, for an input, I found that the border color was rgb(0,0,0) by checking the computed style. That's the max contrast. I'm not sure how the contrast was computed to be so low, perhaps you are seeing subpixel rendering. Regarding disabled controls, it's not important to differentiate the border from the fill, which is stylistic enhancement around the fill and not intended to be informational. Taken as a whole, the entire field is very thick line, and thick lines stand out quite well (which is why bold face fonts have a lower contrast requirement). Therefore I don't think the normal contrast requirement applies in quite the same way. IMO it's not as if users are having trouble seeing where such a thick field is. Tested with a blur filter (or something like the NoCoffee extension), I also subjectively don't see a real-world issue. Please reopen if you disagree or you have examples of users that are having difficulty. Thanks for taking the time to file it.
,
Aug 8 2017
The color rgb(0,0,0) is the color of the text the user will type. Using the computed color from the inspect tool, the border color is the issue... border-left-color: rgb(238, 238, 238); contrast ratio is 2.4:1 even when focused the outline color is rgb(77, 144, 254); contrast ration is 3.1:1 contrast ratio from https://www.paciellogroup.com/resources/contrastanalyser/ |
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
Comment 1 by ligim...@chromium.org
, Jun 1 2017Labels: Needs-Bisect Needs-Triage-M58