Skip to main content

David Mead

Sketch plugin goes from free to paid, with dark pattern. Looking at you @sketch_runner...

2 min read

I'm a big fan of a Sketch plugin called Runner.  This lets you run, and install, plugins from within Sketch by typing-much like Alfred.

When I hit the keystroke to launch it today, nothing happend. I went to tool bar and everything looked normal, so I started it from there.  What I saw was a splash screen for Runner Pro.

screenshot of Runner splash screen

I didn't want to start a 14 day free trail. I just wanted to keep using the free (and only version up-to that point) that I had installed.

I clicked through the "Discover what's new" sections until I got to the end.  This had another start free trial call-to-action.

screenshot of last splash page for Runner

 

Nothing on how to keep using the version I had.

I went to the site to find it's now all about the paid version of Runner Pro. Digging down into the documentation online I found the top FAQ is now "Is Runner paid only?"

Seems I have to use the paid version for 14 days, which then reverts to the free version. I get it. You want people to adopt it and pay for the hard work put into a great tool. No argument there.  Just this approach feels very "dark pattern" and not great to me.

Some reassuring text on the splash pages wouldn't have had me searching the FAQ's and wondering if there are alternatives. Also wouldn't make me second guess paying for the Pro version, which is where I am now.

 

David Mead

Be aware of false positives when using #a11y contrast ratio plugins...

2 min read

I know you everyone knows this, but just in case you don't here's a pro-tip.

When using a contrast ratio plugin with Sketch (or other design tools) make sure the text layer is set to 100% opacity. Why? Because if you don't, you may get a false positive result.

screenshot showing 14px black text on gray background passing AAA level from WCAG

Here's some 14px Rubik type using #000000 (black) on a background of #D8D8D8 (gray). We get a nice 'AAA' pass when testing against the WCAG.

But if I take the text layers opacity down to 20%, what do you think happens?

screenshot showing 14px light gray text on gray background passing AAA level from WCAG

I still get the same passing grade. I assume this is because the checker still knows this is solid black text, but has no insight to the opacity of the layer.

Visually the text is the same color as #ACACAC (light gray) which would fail the contrast check.

screenshot showing 14px light gray text on gray background failing WCAG contrast check

When running your design through a checker, just make sure someone (because of course you wouldn't) has not changed the text color by adjusting a layers opacity instad of choosing a specific color.

The two plugins I use for Sketch are:

and they both seem to bring back these passes when the layers opacity are changed.