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)
At the time when the question was asked, WCAG 2.0 was still the most recent version of the W3C's web accessibility recommendation. Success criterion 1.4.3 [Contrast (Minimum)] says,
The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)
Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.
Controls such as checkboxes or other user interface elements (except for text in user interface elements) are not covered by this success criterion. According to the letter of WCAG 2.0, the unselected checkboxes in the screenshot would pass.
In order to close this loophole, WCAG 2.1 introduced a new success criterion, 1.4.11, which is worded as follow:
The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):
- User Interface Components: Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;
- Graphical Objects: Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.
The checkboxes fit the description "visual information used to indicated states", so the new SC would apply here. In the January 2018 draft, this success criterion is currently marked as "at risk", but it made it through the standardisation process, and now causes the unselected checkboxes in the screenshot to fail WCAG 2.1 Level AA.
UPDATE 3 August 2018: since WCAG 2.1 became a W3C recommendation in June 2018, the answer has been updated to reflect this. Also note that webpages that meet WCAG 2.1 also meet WCAG 2.0 (new success criteria were added; existing ones remained at their original conformance level).
