I’m designing a healthcare application and accessibility is our top priority. I’m struggling to find a balance between a modern, "light" aesthetic and meeting the WCAG 2.1 AA contrast requirements. Are there specific plugins or workflows you use to check contrast ratios for text over images or gradients? How do you handle font scaling for users with visual impairments?
3 answers
Designing for accessibility is not just a moral choice; it's a legal one in many sectors. I highly recommend using the "Stark" or "A11y - Focus Orderer" plugins in Figma. For contrast, the AA standard requires a 4.5:1 ratio for normal text. If you want a light aesthetic, try using darker "off-blacks" or deep blues instead of pure light grey for text. For gradients, you must check the contrast at the lightest point of the gradient where text overlaps. In our 2024 audit, we found that increasing our body text size to 16px and using a minimum contrast ratio of 5:1 significantly improved our user retention among older demographics.
Have you considered implementing a "High Contrast Mode" toggle in your app settings instead of trying to make one single design work for everyone?
Always test your designs in grayscale. If the hierarchy still works without color, you’ve built a strong foundation for users with color blindness.
Simple but effective! I always use the grayscale filter in the final review stage to make sure my primary call-to-action buttons really stand out.
Christopher, that's a valid "Power User" feature, but it shouldn't be an excuse for poor default design. Accessibility should be baked into the core experience (Universal Design). A toggle is great for extreme cases, but if your default app isn't readable for someone with moderate low vision, you're excluding a huge chunk of your audience right from the start. We found that a "good" default design actually benefits everyone, even those with perfect vision, especially in bright sunlight.