Contrast by Alex Carr

Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG). If Contrast cannot find the background color, add another layer to your selection, and Contrast will compare them both.

Are you looking to give everything a once-over before finishing? Scan entire pages to generate a report of all text-based contrast issues. Step through them and fix issues as needed.

• Select elements to automatically find the color behind them
• Scan entire pages or the current selection to see all text-layer color issues
• Works on any element, not just text
• Extremely fast and responsive—keep it open as you work
• Supports image and gradient backgrounds with Smart Sampling
• Supports solid, transparent, blended fills, layered fills, and backgrounds
• Live updates as you change the color, opacity, or blend of the selected element

APCA Support (Beta)

Contrast now includes Beta support for the Advanced Perceptual Contrast Algorithm (APCA) algorithm. Calculate contrast using APCA, a new method for calculating and predicting readability contrast. This method is continuously evolving. APCA W3 is in public beta and use of the algorithm in Contrast is a work in progress. Please share your thoughts with us! We'll continue to post updates and new approaches over time.

Smart Sampling

Contrast can compare an element’s color with the colors it finds in gradients and images in the background. It does this by taking a sampling of colors from the area directly behind the element and calculating the contrast ratio for each color. Contrast considers a color passing if all colors in the sample pass.

Bugs

If you have a situation where Contrast is not finding the right background, please let us know! Send us an example test case in Figma along with a short description of what you were expecting, and we’ll have a look.

Known Issues

• Element strokes are not yet supported

Smart Sampling Technique

Contrast uses RGBQuant to analyze the selection of pixels behind an element. It looks for colors (pixels) that are represented two or more times within each sub-region (64x64) of the area tested. This method gives the best balance of speed and results. The time it takes Contrast to sample and analyze the colors is proportional to the size of the layer you are testing. I.e., Larger layers, in terms of area, will take longer than smaller areas. Sampling can temporarily block the interface in the same way that exporting a frame might—this shouldn’t be very noticeable for smaller layers.

Credits

Contrast was made by the WillowTree design team.