Skip to content

Color contrast on check box, radio button, switch, and carousel hover #5668

@mark-tate

Description

@mark-tate

Testing checkpoint
Checkpoint 1.4.11-01 - User interface components and graphical focus or state indication must meet contrast minimum against adjacent colors

How to replicate

For an empty radio button on the page, force the hover state on its element using developer tools and then test the contrast between the darkest parts of the blue colored outline and the background
Repeat with an empty check box
Check the check box and then repeat the hover state contrast review with that as well, also testing the contrast between the check box and the check mark inside it
Increase the zoom level to 175% and retest the empty radio buttons and check boxes to ensure the issue is still present at a higher zoom level (reopening the dialog as needed) in case the thinness of the lines was causing difficulty capturing the darkest border pixels, which is a particular concern on radio buttons due to the circular shape

Expected/actual result
Expected Result

While hover states for interactive elements are not required to meet contrast minimums against other states, they must still provide enough contrast to distinguish them from the background (if there is not a content in the element with greater contrast, such as black text) and any meaningful content in the element, such as a check mark. Thus, the hover styling for these elements should have a 3:1 contrast minimum against the white background and white check mark.

Actual Result
The contrast ratio for this color against the white of the background and check mark is 2.92:1, which does not meet the 3:1 minimum.
NOTE: Other hover states on this form that DO pass contrast requirements include the text input field outlines (#1b7f9e, 4.58:1 contrast) and the ADD button background (#12647e, 6.66:1 contrast). I've listed these in case they are relevant for stylistically consistent remediation.
Technologies (browser/app, assistive technique or technology)
Tested with Chrome

Customer’s experience
A customer with low vision may have difficulty seeing the empty radio buttons and check boxes while hovering over these UI elements or their labels. They may also have difficulty determining that a check box was successfully checked while still hovering the mouse pointer over the check box or its label.
Workaround
Moving the mouse away from these elements results in the elements meeting contrast minimums (the grey outline for an empty radio button or check box measures 4.51:1, the blue of the checked box measures 4.58:1, and the red of the check box outline when all check boxes become empty after one has been checked measures 4.56:1)

Metadata

Metadata

Type

Projects

Status

Green

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions