Skip to content
Allows you to select layers in Sketch and get realtime feedback about the contrast ratio
HTML JavaScript CSS
Branch: master
Clone or download

README.md

Check Contrast

Get the contrast ratio of two layers with realtime feedback.

GitHub Release Github All Releases Twitter Donate

Installation

  • Download the latest release of the plugin
  • Un-zip
  • Double-click on check-contrast.sketchplugin

What it does

Opens a panel so that you can view the colour contrast ratio and pick colours at the same time.

You can select a single layer and this plugin will do it's best to pick out the background layer's colour for you.

If you have two colours for checking then you can select two layers and the plugin will check for you.

Demo of live colour selection

Inspiration of design

A designer on my team thought it was tedious to have to toggle a command when choosing a colour each time to check the contrast. During exploration it is easier to choose a colour and get realtime feedback.

I thought what if it we brought back a bit of Winamp skins style in this day and age and if it is even possible 🤔. Found this Winamp Sketch file by Anja van Staden and was able to make the UI in Sketch with HTML/CSS.

Issues and requests

You can ask me directly @lifeofmle on Twitter or raise an issue in Github

How to say thanks

If you are on Github, please 'star' this project on Github.

If you are on social media, please share this link with your team and friends.

If you want to donate to share the love, why not shout me a coffee ☕️, beer 🍺, or avocado 🥑 via PayPal!

You can’t perform that action at this time.