Color contrast: checkboxes and radio buttons

[afercia]

See related #31713.

As part of the effort to audit color contrast in the admin and make the contrast ratio at least 4.5:1 (WCAG AA level) it would be important to consider also form controls.

Starting with checkboxes and radio buttons, some browsers allow them to be styled, some don't. The actual rendering of these controls also varies depending on the operating system but where the styles provided by WordPress apply (basically on Webkit browsers), the color contrast is really low.

See in the screenshot below, checkboxes in latest Chrome and Firefox on Windows 10:

Form controls are such a fundamental part of any user interaction and should be clearly visible to all users, also low vision or color blind users.

We've discussed a bit this issue in the accessibility team and there's no objection to style them, by the way the border color should maybe standardize to a darker one, like Firefox does.

Any thoughts and patches welcome :)

[FlorianBrinkmann]

Changing the border color of checkbox and radion form control from #b4b9be to #000

[FlorianBrinkmann]

Hey! :)

My patch changes the border color of radio buttons and checkboxes to black, in the screenshot on the left side Firefox, on the right Chrome on Windows 10.

[rianrietveld]

Changing the color to #000 seems very dark, what about 555D66?
The contrast will be sufficient too.
555D66 is a WordPress color, see ​http://codepen.io/hugobaeta/full/RNOzoV/

[FlorianBrinkmann]

Oh, thanks for the Link, I didn’t had the WordPress colors in mind. I will upload a new patch with 555D66 tomorrow!

[FlorianBrinkmann]

Changes the border color of radio and chachbox form controls from b4b9be to 555d66

[FlorianBrinkmann]

35596.2.patch changes the border color from b4b9be to 555d66. Firefox on the left, Chrome on the right.

[afercia]

It seems to me 35596.2.patch​ it's a reasonable change and an improvement for accessibility. By the way, I admit it should be probably be considered together with other borders used for form elements. Inputs, selects, etc. would probably need a slightly darker border color. See screenshot below. Worth noting the different border color between different form element types is what Firefox users see every day.

A patch would be simple, just needs some thoughtful design feedback :)

[afercia]

At the accessibility team, this week we should be able to do a test about this checkboxes/radio implementation: ​http://www.getmdl.io/components/index.html#toggles-section/checkbox
Designers welcome too. By the way, investigation and gathering consensus would require time and about the release schedule, it's very likely this ticket can't be completed before 4.5 RC.

[chriscct7]

Punted per comment:9 and discussion in trac.

[afercia]

Since core is already styling radio buttons, what about styling checkboxes too? See for example: ​https://standards.usa.gov/form-controls/#checkboxes

[joedolson]

Discussed this in the accessibility meeting today, and have concluded that there's no benefit at this time to attempting to resolve issues with cross-browser support for input element styles, but any styles that WordPress imposes need to be compliant with WCAG 2.0 color guidelines where they are applied.

[afercia]

Related: #38150

[melchoyce]

It would be nice to take a look at all of the form styles more holistically. I'd love to see someone bring all the form items in core into something like a CodePen so it's easy to share, and then work on tweaking all the colors to match and pass contrast guidelines.

[rianrietveld]

Refresh of 35596.2.patch

[rianrietveld]

@afercia: 35596.3.patch is a refresh of nr 2.
Enhances colour contrast for radio buttons and check boxes.

Tested in Firefox/Safari/Chrome/Edge/IE11.

Doesn't work in Firefox and IE11, as expected.
But it seems like IE11 already has a default darker border.

[afercia]

Interestingly, Gutenberg is going to redesign the checkboxes. See ​https://github.com/WordPress/gutenberg/pull/8588

[afercia]

There are a few tickets now asking for form controls redesign, see #44749, #44606, and #38150.

[afercia]

Closing in favor of #47153 (5.3 blessed task): on current trunk form controls have now new styles for better contrast and focus indication.