A Sketch plugin that calculates the color contrast of two selected layers and evaluates it against the WCAG2.0
Clone or download
#1 Compare This branch is 4 commits ahead, 20 commits behind getflourish:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
Contrast-Checker.sketchplugin/Contents/Sketch rewrite to new format Nov 5, 2016
Readme.md
demo.gif

Readme.md

Color Contrast Analyser for Sketch

Update from @auxdesigner: Now it supports transparency

alt tag


A Sketch plugin that calculates the color contrast of two layers and evaluates it against the WCAG. The test may pass AAA, AA or fail because of a lack of contrast. And even when you do not need to meet those requirements, you can get a feeling for the contrast when you get used to the values. This might help you design accessible content.

Update: Also works with single layers that are now checked against the artboard background color.

Note: This plugin works with solid text and fill colors. Transparency is not supported yet.

AA requirements

Color contrast of 4.5:1 or 3.0:1 for large text

AAA requirements

Color contrast of 7.0:1 or 4.5:1 for large text

(Large text means regular text larger than 18pt or bold text larger than 14pt)

Read more about the Web Content Accessibility Guidelines 2.0 http://www.w3.org/WAI/WCAG20/quickref/#qr-visual-audio-contrast-contrast

Based on the algorithms described here: http://gmazzocato.altervista.org/colorwheel/algo.php