WordPress.org

Make WordPress Core

Opened 21 months ago

Last modified 2 weeks ago

#35596 assigned defect (bug)

Color contrast: checkboxes and radio buttons

Reported by: afercia Owned by: afercia
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots color-contrast has-patch ui-feedback
Focuses: ui, accessibility Cc:

Description

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:

https://cldup.com/SIRDA2oasX.png

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 :)

Attachments (2)

35596.patch (374 bytes) - added by FlorianBrinkmann 21 months ago.
Changing the border color of checkbox and radion form control from #b4b9be to #000
35596.2.patch (377 bytes) - added by FlorianBrinkmann 20 months ago.
Changes the border color of radio and chachbox form controls from b4b9be to 555d66

Download all attachments as: .zip

Change History (21)

This ticket was mentioned in Slack in #design by afercia. View the logs.


21 months ago

#2 @afercia
21 months ago

  • Owner set to afercia
  • Status changed from new to assigned

@FlorianBrinkmann
21 months ago

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

#3 @FlorianBrinkmann
21 months ago

  • Keywords has-patch added; needs-patch removed

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.

https://cldup.com/-oyeeyRZGw-3000x3000.png

Last edited 21 months ago by FlorianBrinkmann (previous) (diff)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


20 months ago

#5 @rianrietveld
20 months ago

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/

#6 @FlorianBrinkmann
20 months ago

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

@FlorianBrinkmann
20 months ago

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

#7 @FlorianBrinkmann
20 months ago

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

https://cldup.com/aHBZe2wwil-3000x3000.png

Last edited 20 months ago by FlorianBrinkmann (previous) (diff)

#8 @afercia
20 months ago

  • Keywords ui-feedback added

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 :)

https://cldup.com/1902f93Mth.png

#9 @afercia
20 months ago

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.

This ticket was mentioned in Slack in #core by chriscct7. View the logs.


20 months ago

#11 @chriscct7
20 months ago

  • Milestone changed from 4.5 to Future Release

Punted per comment:9 and discussion in trac.

#12 @afercia
14 months ago

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

https://cldup.com/3mxfEnTddo.png

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


13 months ago

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


8 months ago

#15 @joedolson
8 months ago

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.

This ticket was mentioned in Slack in #design by afercia. View the logs.


8 months ago

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


2 weeks ago

#19 @melchoyce
2 weeks ago

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.

Note: See TracTickets for help on using tickets.