All Projects → bryanberger → sketch-wcag

bryanberger / sketch-wcag

Licence: other
A Sketch plugin that let’s you test an entire color palette against the WCAG 2.0 contrast guidelines.

Programming Languages

javascript
184084 projects - #8 most used programming language
CSS
56736 projects

Projects that are alternatives of or similar to sketch-wcag

cluse
Sketch Plugin to check and adjust color contrast accessibility with live preview and sliders. Endorsed by Sketch.
Stars: ✭ 54 (+100%)
Mutual labels:  sketch-plugin, wcag, color-contrast, color-contrast-checker
SAPC-APCA
APCA (Accessible Perceptual Contrast Algorithm) is a new method for predicting contrast for use in emerging web standards (WCAG 3) for determining readability contrast. APCA is derived form the SAPC (S-LUV Advanced Predictive Color) which is an accessibility-oriented color appearance model designed for self-illuminated displays.
Stars: ✭ 266 (+885.19%)
Mutual labels:  wcag, color-contrast, color-contrast-checker
AccessConfig
Un sélecteur de styles, léger et open source, pour permettre aux personnes en situation de handicap d’adapter votre site à certains de leurs besoins.
Stars: ✭ 20 (-25.93%)
Mutual labels:  wcag, color-contrast
accessibility-testing-tools
A collection of useful tools for accessibility testing and debugging in the browser, online and desktop
Stars: ✭ 18 (-33.33%)
Mutual labels:  wcag, color-contrast
Git Sketch Plugin
💎 A Git client generating pretty diffs built right into Sketch.
Stars: ✭ 2,459 (+9007.41%)
Mutual labels:  sketch-plugin
Paddy Sketch Plugin
Automated padding, spacing and alignment for your Sketch layers
Stars: ✭ 2,219 (+8118.52%)
Mutual labels:  sketch-plugin
Sketch Style Master
Sketch plugin for renaming shared styles
Stars: ✭ 193 (+614.81%)
Mutual labels:  sketch-plugin
Symbol Swapper
Swap the selected symbols and/or symbol instances to a master of the same name in a library.
Stars: ✭ 179 (+562.96%)
Mutual labels:  sketch-plugin
sketchapp-json-plugin
Provides utilities for basing your plugins on the JSON format instead of learning all of the sketch private API objects.
Stars: ✭ 54 (+100%)
Mutual labels:  sketch-plugin
sketch-maps
🗺 A Sketch plugin that uses the Mapbox API to fill layers with specific and custom maps.
Stars: ✭ 85 (+214.81%)
Mutual labels:  sketch-plugin
Fluid For Sketch
[Sketch Plugin] Sketch-flavored Auto Layout-like Constraints
Stars: ✭ 2,408 (+8818.52%)
Mutual labels:  sketch-plugin
Picasso
一款sketch生成代码插件,可将sketch设计稿自动解析成前端代码。
Stars: ✭ 191 (+607.41%)
Mutual labels:  sketch-plugin
Pdf Export Sketch Plugin
Sketch plugin for PDF exporting
Stars: ✭ 231 (+755.56%)
Mutual labels:  sketch-plugin
Library Symbol Replacer
Sketch plugin to replace symbols in an existing documents with library symbols 💎 📚
Stars: ✭ 193 (+614.81%)
Mutual labels:  sketch-plugin
sketch-bootstrap-helpers
Helpers plugin to work with bootstrap grid in Sketch
Stars: ✭ 16 (-40.74%)
Mutual labels:  sketch-plugin
Sketch Subtlepatterns
🔶 Import Subtle Patterns as shape fills in Sketch
Stars: ✭ 179 (+562.96%)
Mutual labels:  sketch-plugin
Plugin Requests
A collection of plugins requested to our Twitter account
Stars: ✭ 211 (+681.48%)
Mutual labels:  sketch-plugin
React Sketchapp
render React components to Sketch ⚛️💎
Stars: ✭ 14,861 (+54940.74%)
Mutual labels:  sketch-plugin
Android res export
Export Android resources in Sketch, bitmap assets, nine-patch, vector drawable, app icon, shape XML..
Stars: ✭ 204 (+655.56%)
Mutual labels:  sketch-plugin
Copy Framer Code
A Sketch plugin that copies any selected layer to the clipboard as code that can be pasted straight into a Framer prototype.
Stars: ✭ 201 (+644.44%)
Mutual labels:  sketch-plugin

Sketch WCAG Plugin

A Sketch plugin that let’s you test an entire color palette against the WCAG 2.0 contrast guidelines.

Sketch WCAG by Bryan Berger

Installation

Recommended

You can install the plugin from Sketch Runner or Sketchpacks.

Manually

Download the zip from here and double-click the .sketchplugin to install.

Usage

Select multiple Shapes with a fill and run this plugin by pressing ⇧⌘C (Shift + Command + C) or via Sketch Runner to preview the WCAG guidelines in your browser. (Currently: Doesn't work on symbols or groups, doesn't account for opacity)

AA requirements

Color contrast of 4.5:1 or 3:1 for large/bold text

AAA requirements

Color contrast of 7:1 or 4.5:1 for large/bold text.

Notes

  • Large text is defined as 14 point (typically 18.66px) and bold or larger, or 18 point (typically 24px) or larger.
  • aa - greater than 4.5 (for normal sized text)
  • aaLarge - greater than 3 (for 14pt/18px+ bold text || for text larger than 18pt/24px)
  • aaa - greater than 7
  • aaaLarge - greater than 4.5 (for 14pt/18px+ bold text || for text larger than 18pt/24px)
  • WCAG tests are run behind the scenes using colorable

Contributing

Contributions are welcomed, file a pull request or an issue.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].