stark-contrast / stark-sketch-plugin Goto Github PK

WCAG 2.1. introduced 'Non-text Contrast' as a Success Criterion. It applies to custom designs for controls. These controls often consist of a variety of elements. The guideline states
"[…] visual information required to identify user interface components and states […]" need to achieve at least a 3:1 contrast ratio for the success criterion to be met.
( https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html )

We just learned that a helpful way to quickly figure out whether a design meets this criterion is to get rid of all the parts with contrast below the 3:1 ratio and check whether the remaining parts are sufficient to let users see and understand the control, it's state and purpose.

While this is for sure not bullet-proof, I think it might be helpful tool for people working on more inclusive designs. I'd love to see something like this to be available as a feature of Stark. (Love this plugin btw., so helpful!)

For illustrative purposes, here's a quick and dirty simulation made with two layers in Sketch:

non-text-contrast.sketch.zip

First of all thanks for building this! I really like how easy it is to use, no more excuses for not doing these checks.

When checking type against a background, Stark currently matches the color of the text against the color of the shape. I think matching the color of the text against the background color of the shape would be better behaviour, since that’s often what you want. Maybe like so:

• Use color for text layers.
• Use background color for all other layer types.
• If the layer does not have a background color, use border-color when present.

I’m not familiar with programming Sketch plugins so I don’t know if this is at all possible, but it would be nice.

Hey, pretty fantastic plugin! 👍

it would be pretty if you could add shortcut to go to the next / previous color blindness mode. This would make it easy to toggle through them quickly to check where you have issues.

Thanks.

Provide designers with a bit more info on why their colors do not meet the proper ratio for WCAG 2.0 standards.

Firstly, thanks so much for creating and supporting this plugin! It's incredible to have the color contrast and color deficiencies in one tool.

When selecting 2 layers (text and a background color with opacity), I noticed the color contrast is calculated on the full opacity version of each's colors. Could a future enhancement take into account opacity, or even better yet — calculate the optical result of any number of layers, including just 1 over an artboard color? (This is in another request as the ultimate goal, but may be necessary for calculating the resulting color of what that translucent layer's color turns into.)

When checking the accessibility of a colour, most times at a default I want to see if it's either accessible against white or black.

I thought this was an option with the previous version of Stark? I may be mistaken though.

Regardless, if instead of having two layers selected as a default, it would be good if "white" (or black) could be a "pseudo-selection" if only one layer is selected.

Does that make sense?

It is a great tool. It would be even better if it was more compact and we had more control over the size of the window. It takes a lot of screen real estate. Especially the contrast checker.

Edit: Forgot to say that I love this tool and use it pretty much everyday!

I frequently used the old version to quickly compare color options in the colorblind simulator across multiple artboards. I am unable to do this now with the new design, it's impossible to quickly compare two artboard options as the simulation type resets when I change artboards but even if it kept the simulation type, I would find it much harder to compare by swapping vs side by side. I find the tool much less valuable because of the update. Would it be possible to add the option to use the old colorblind simulation?

If the exported PNG from Stark preview contains a color profile. The results viewed in (some) web browsers or other computers might differ dramatically from the real view.

I see this strange result when viewing the png in Chrome browser.

Due of our workflow all artboard with screendesigns are symbols and the plugin fails if not a pure artboard is selected.

Hi there!

This is a quick note to remind you that Sketch 45 will include a plugin update system.

It would be awesome if you could add support to it (it's really easy!) before Sketch 45 comes out. Ideally, you should release an update for your plugin while we're still in Sketch 44, so your users will have a nice & easy experience when 45 is released.

For more details, please check http://sketchplugins.com/d/229-updating-plugins and http://developer.sketchapp.com/introduction/updating-plugins/

Thanks in advance!

Love the color blindness feature preview! I've noticed some other color blindness preview tools indicate which color blindness types are the most common in the selector (Deuteranomaly (6% of males), Protanomaly (1%), Deuteranopia (1%), Protanopia (1%)).

Though I usually see it marked qualitatively in other apps ("Common", "Rare", "Very Rare").

I thought something in this vein might be useful for those who are less familiar with the different types.

Frequently having an issue where Stark fails to open – typically after I've used it once. Steps to reproduce:

1. Open Sketch and begin working
2. Open Stark (either via Runner or through the menu option)
3. Stark works successfully
4. Close Stark
5. Open Stark again to check another element
6. Nothing happens

Using:
Sketch 49.2
MacOs: High Sierra
Stark: 1.6

Again, thanks so much for creating and supporting this plugin! It's incredible to have the color contrast and color deficiencies in one tool.

I'm not sure of others' needs, but my team more often tests color contrast than color deficiency. Would it be possible to default to the color contrast tool, rather than color deficiency? Or allow it to do so via a setting?

It's very common to have several nested symbols and it would be great to have support for this in the color contrast checker.

Btw, this plugin is 🔥 keep up the good work!

While the contrast checker is currently as complete as other tools I've seen, a visual approach similar to the color blindness mode I think would be more useful and quicker to use. If you've used the NoCoffee simulator for web pages, that's essentially the set of simulation effects I'd like to use when checking a design.

Additionally for the numeric contrast results, it would be great to have:

1. A manual spot check (two draggable, zoomed targets?) that updates in realtime.
2. Automatic highlighters (color fills or outlines) for all areas of the view which won't meet AA and AAA ratios, respectively.

Whenever I use the awesome plugin it generates a snapshot and a js file that is automatically added as an uncommitted change in my git client. Can this be fixed so that I don't have to push changes or discard them before pulling a fresh version? Or any other workaround?

Will this issue go away if I install through i.e Runner?

According to the spec, non-text contrast (https://www.w3.org/TR/WCAG21/#non-text-contrast) items need a ratio for 3:1 for adjacent colors.

It'd be awesome to have a section within the Contrast Checker for this validation type.

Howdy awesome Stark folks!

A user reached out via our forums to report that they were having trouble updating your Plugin.

We checked the report and could replicate the issue. However, some things we did notice:

• The Stark Plugin reports that there’s a new version 3.19.0 available
• When inspecting the appcast.xml only 3.18.0 is specified as the latest one.
• The releases page on this repository still points to a 3.18.0 version

Would you mind checking this on your end in case this is what is affecting the users of the plugin in Sketch? 🙏

Links

• Forum Post in Sketch Forum
• Appcast.xml

After clicking the udpate button nothing happens.
Restarting sketch does not resolve the issue

Had an interesting discrepancy between the Stark Sketch plugin and our Storybook accessibility plugin. We were checking the contrast ratio for the color value #a96805. Stark gave it a passing rating of 4.5:1 where the storybook and the WebAIM checker fails the contrast ratio.

Screenshot from Stark

Screenshot from WebAIM