GithubHelp home page GithubHelp logo

bronzwikgk / check-contrast Goto Github PK

View Code? Open in Web Editor NEW

This project forked from lifeofmle/check-contrast

0.0 0.0 0.0 2.12 MB

Allows you to select layers in Sketch and get realtime feedback about the contrast ratio

CSS 23.91% HTML 42.42% JavaScript 33.67%

check-contrast's Introduction

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!

check-contrast's People

Contributors

lifeofmle avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.