Add Contrast Ratio info to control inspectors

Wireframes for Desktop
1

As a designer, I’d like to see the colour contrast ratios and WCAG AA/AAA pass/fail information for the selected control if applicable.

Details:
One of my tasks when I’m creating user interfaces is to check the colour contrast ratios of my design elements. Currently, I use other apps or browser dev tools to figure this out and then pick the appropriate colours in Balsamiq Wireframes.

This would admittedly be most useful for buttons or other objects where you have a background and foreground colour
I use WebAIM: Contrast Checker for the contrast info, so that’s what I’ve mocked up below.

Snapshot
Snapshot764×1336 86 KB

3

We do love a11y stuff, @skaldi, and I dig this.

I think it may be a bit outside our intended design for the app as we aren’t really optimizing for doing “final designs” in Balsamiq Wireframes.

With that said, I will write this up, and we will talk about it on Monday. :slight_smile:

4

Ah ok, fair enough. Thanks for looking into it.

1 Like