checkscontrasted

Checkscontrasted is a design concept used in user interface design and accessibility to describe the practice of ensuring that checkable controls, such as checkboxes, radio buttons, and toggle switches, plus their labels, have sufficient visual contrast against their background. The goal is legibility and recognizability in varying lighting conditions and for users with vision impairments.

Origin and scope: The term has appeared in accessibility discussions among UX designers and auditors, particularly in the context of non-text contrast guidelines. It is not an official specification, but it aligns with broader accessibility principles that require clear differentiation of interactive elements from surrounding content and environments.

Standards and guidance: In WCAG 2.1, non-text contrast applies to graphical objects including user interface components. The guideline recommends a contrast ratio of at least 3:1 between the UI element and its adjacent colors for graphical objects. For state changes, such as checked versus unchecked, the element should maintain sufficient contrast to remain distinguishable. This encompasses the control’s shape, fill, border, and any checkmark or indicator.

Implementation tips: Designers should select color pairs with adequate contrast, provide clear outlines or borders, and ensure focus indicators are visible. It is important to test across light and dark themes and across devices. In addition to color, combining textual labels, high-contrast icons, and accessible ARIA attributes helps support users with visual or cognitive impairments and those relying on assistive technologies.

See also: accessibility, color contrast, WCAG, user interface design, checkbox, toggle, non-text contrast.