Color contrast is the most common accessibility concern for UI designers. There are a lot of great plugins out there that help check color contrast. But what I’d like to see is Figma auto checking contrast and flagging things that don’t meet WCAG spec. Bonus points if you can detect other accessibility issues like small tap targets.
This is a great idea, thanks for sharing @Brian_Clay!
Would you see this as a separate tool or more built into the color picker?
I think it’s best to specify the color accessibility in the Color Picker. In the screenshot below: Color Picker from Chrome DevTools.
I think it would be a good idea to have an “Accessibility issues” panel in the Figma, providing a similar function to the “Errors” panel in an IDE. When hidden, it would show a count of detected accessibility issues, and clicking on it would display a list containing the details of each issue (i.e. “Text in frame Foo fails to meet WCAG AA”, “Colours #FFFF00 and #00FF00 are not visually distinct for users with protanopia”). Clicking on an issue would then take you to the element where it occurs.
This panel could also house other accessibility-related features, such as colourblindness simulation filters.
I think integrating this into Figma would significantly reduce the amount of effort needed to design accessible UI, and in turn improve the state of accessibility on all platforms.