Non-text Contrast
Inclusion of this section is on the assumption that as a designer, program or project manager reviewing this guide, you possess a foundational understanding of design principles pertinent to form building.
When we talk about accessibility on websites or apps, we often think about text. We make sure it's large enough or has good contrast with the background. But accessibility goes beyond just words. Non-text contrast refers to the visual contrast between important UI elements that aren't text, like icons, buttons, form fields, focus indicators, and any graphics that convey meaning. If these elements blend into the background or aren't easy to see, some users, especially those with low vision or color blindness might not even realize they're there.
The Web Content Accessibility Guidelines (WCAG) 2.2 recommends a contrast ratio of at least 3:1 for these non-text elements against adjacent colors. That means your submit button, toggle switch, or required field icon needs to stand out clearly from the background and surrounding content. It's not just about color either, using clear outlines, shapes, or indicators helps ensure everyone can recognize what's interactive or important. Good non-text contrast helps all users navigate your site more easily and reduces the chance of missing something critical, like an error message or action item.
Further clarification on Non-text Contrast (Level AA), W3.org offers an exhaustive guide delineating recommended practices and pitfalls to avoid. In lieu of redundantly summarizing its contents, I defer to their expertise and encourage you to read their comprehensive resource.
Some of the topics covered are: Boundaries, adjacent colors, relationship with use of color, and UI component examples.