Understanding Value and Color Contrast

A huge part of UI accessibility is acknowledging that people won’t use an application or website in the ideal or default state. The user interface is simply not going to look, feel, or function exactly the way that it does in a pixel-perfect design software mockup. Users will zoom, adjust, adapt, and change the layout to meet their personal needs, and that’s a good thing! We want them to be able to make the adjustments they need and use our websites and applications comfortably.

Flexible UIs are accessible UIs

With that in mind, it’s essential to build “wiggle room” into all of our pages and layouts. This idea is about more than just extra physical spacing between elements (although that is also a helpful thing to have). Wiggle room means allowing room for adjustment in all of our design decisions. It’s why something that barely satisfies WCAG criteria might be technically acceptable but still cause problems for your users. Building in room for adjustment allows for flexibility and accommodates fluctuations so that the users can change things without fear of breaking the interface. As we create different aspects of our UIs, it’s important to keep this concept in mind and consider where we can allow for that flexibility in our work!

Color contrast

When you’re choosing colors for your various UI elements, it’s important to make sure you’re meeting an accessible standard for color contrast. Text, especially, is incredibly difficult to read when there’s not enough contrast between it and the ...