Contrast checker integrated into colour picker

Just saw figma do this and i’m in love, would love for Sketch to also have this, it encourages me to use better colours everytime i design.

and the way they highlight the areas with low contrast is super nice.

This is an insanely good feature. I’ve just spotted it. Guys, we need this. It’s awesome.

Hey Sketch team, if you decide to implement something like this, please do not use the WCAG contrast formula like Figma did. It’s basically useless outside of shades of grey (and even then, it has issues).

This blog post has illustrations of the problem: WCAG vs APCA: Why Your UI Color Contrast Fails & How to Fix It | New Accessibility Standards | Medium

This model is the proposed replacement

1 Like

I completely agree—having a built-in contrast checker within the color picker would be a valuable addition to Sketch. It would streamline the accessibility workflow significantly by allowing designers to test color contrast in real time without relying on external tools or plugins.

In the meantime, you might consider using the Stark or Color Contrast Analyser plugins, which are quite effective for WCAG compliance checks. However, having this functionality natively in the color picker would not only save time but also encourage more accessibility-conscious design from the ground up.