WordPress.org

Make WordPress Core

Opened 17 months ago

Last modified 4 months 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 17 months ago.
Changing the border color of checkbox and radion form control from #b4b9be to #000
35596.2.patch (377 bytes) - added by FlorianBrinkmann 16 months ago.
Changes the border color of radio and chachbox form controls from b4b9be to 555d66

Download all attachments as: .zip

Change History (19)

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


17 months ago

#2 @afercia
17 months ago

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

@FlorianBrinkmann
17 months ago

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

#3 @FlorianBrinkmann
17 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 17 months ago by FlorianBrinkmann (previous) (diff)

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


16 months ago

#5 @rianrietveld
16 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
16 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
16 months ago

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

#7 @FlorianBrinkmann
16 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 16 months ago by FlorianBrinkmann (previous) (diff)

#8 @afercia
16 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
16 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.


16 months ago

#11 @chriscct7
16 months ago

  • Milestone changed from 4.5 to Future Release

Punted per comment:9 and discussion in trac.

#12 @afercia
10 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.


9 months ago

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


4 months ago

#15 @joedolson
4 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.


4 months ago

Note: See TracTickets for help on using tickets.