Skip to content

A Sketch plugin that calculates the color contrast of two selected layers and evaluates it against the WCAG2.0

License

Notifications You must be signed in to change notification settings

getflourish/Sketch-Color-Contrast-Analyser

Repository files navigation

Color Contrast Analyser for Sketch

A Sketch plugin that calculates the color contrast of two layers and evaluates it against the WCAG. If only a single layer is selected, than it will calculate with its artboard background color. 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.

Screenshot

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.

A note on rounding (as of 21 Feb 2020)

The displayed values are not rounded, but limited to display two decimals. For example, a calculated contrast ratio of 1.39999 will be returned as 1.39 and won’t be rounded to 1.40. This avoids false positives.

A note on "large" text

The WCAG specification of font size is given in CSS points. Those are not equal to the point size in Sketch. Text in Sketch is smaller than its CSS equivalent. Thus, the font size thresholds from the WCAG specification are converted to provide correct results in Sketch.

Illustration: https://codepen.io/getflourish/pen/oEyZRy

Details in Note 1: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Notes

Credits

Made by Florian Schulz (@getflourish on Twitter), 2014

About

A Sketch plugin that calculates the color contrast of two selected layers and evaluates it against the WCAG2.0

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published