Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Do unselected checkboxes need to be >4.5 contrast ratio to be WCAG AA compliant?

I'm trying to understand the details of WCAG AA compliance. Would the unselected checkboxes in this image be considered too low-contrast to be compliant?

Heading Yesterday with a group of checkboxes: Last 7 days, Last 30 days, All time, Custom Range. The Last 7 days checkbox is checked. The unselected checkboxes appear to be low contrast.

Is there anything we can do (other than change the color) to make it more compliant? If tab-focus makes the contrast go up, is that enough? Or do we really just need to boost the contrast?

like image 438
Brian Genisio Avatar asked Nov 01 '25 07:11

Brian Genisio


1 Answers

This point is covered by the new WCAG 2.1 guideline: 1.4.11 Non-text Contrast

For controls on the page, such as buttons and form fields, the visual boundaries of the component must have sufficient contrast with the adjacent background. Also, the visual effects which indicate state, such as whether a component is selected or focused, must also provide the minimum 3:1 contrast with the adjacent background of the component.

Note: the tab focus is not enough as it already implies using a keyboard (which won't have any effect for people with low vision using a touchscreen for instance)

like image 181
Adam Avatar answered Nov 04 '25 07:11

Adam



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!