New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 728691 link

Starred by 1 user

Issue metadata

Status: WontFix
Owner: ----
Closed: Aug 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug
Team-Accessibility



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 description

UserAgent: 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.
 
Cc: ligim...@chromium.org
Labels: Needs-Bisect Needs-Triage-M58

Comment 2 by all...@tsbvi.edu, Jun 1 2017

Apologies... expected behavior should be 
borders around form controls should be 4.5:1 (not 5:1)
Components: -Blink Blink>Accessibility
Cc: hdodda@chromium.org
Labels: Needs-Feedback
@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!

Comment 5 by all...@tsbvi.edu, 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.
Project Member

Comment 6 by sheriffbot@chromium.org, Jun 15 2017

Labels: -Needs-Feedback
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

Comment 7 by hdodda@chromium.org, Jun 22 2017

Labels: Needs-Feedback
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!
728691.mp4
1.1 MB View Download
Labels: triage-aaron
Labels: -Needs-Bisect
Removing from Bisect bucket since TE was not able to repro.
Description: Show this description
Labels: -triage-aaron
Status: WontFix (was: Unconfirmed)
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.

Comment 12 by all...@tsbvi.edu, 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