Do checkbox components need to reach a certain contrast ratio?
Question
Do checkbox components need to reach a certain color contrast ratio?
Answer
If the checkboxes are an active user interactive (UI) component, they are required to reach a color contrast ratio of at least 3:1 against adjacent colors. If there is visual information on a page used to identify user interactive components, they must also have a 3:1 contrast ratio against adjacent colors. This visual information used to identify a UI component can be an input border, button shape/outline, etc.
Exception: Ignore components in the disabled state and components with contrasting indicators.
Accessible Web's WCAG Color Contrast Checker can be used to calculate the contrast ratio between different colors and detect if that ratio meets requirements for various WCAG success criteria. Check out our other web accessibility tools and WCAG testing software too!
For more information, the Accessible Web Academy course Accessibility Concepts for Designers includes in-depth discussion about creating accessible designs.
