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?

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?
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)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With