Do checkbox components need to reach a certain contrast ratio?


Do checkbox components need to reach a certain color contrast ratio?


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.

Free Tools to Continue Learning

Accessible Web Company Logo

Accessible Web RAMP

Monitor your website and manage your progress towards WCAG conformance.

Accessible Web Company Logo

Accessible Web Academy

Career specific courses to help power up your accessibility knowledge.