Perception - Accessibility & Color Contrast Testing

You've been asked to run an accessibility audit on a file with hundreds of components. Perception does it for you.

Select any frames, components or layers and scan. It finds the text and icons, checks their contrast against WCAG and APCA, and gives you a list of what passes and fails to fix before handoff.

Gradients, images, blend modes, patterns and effects don't trip it up. Perception uses dominant colour detection to measure contrast from what people actually see, not only the first solid fill.

What it checksText and icon contrast across any selectionWCAG 2.0, 2.1 and 2.2, at AA and AAAAPCA, with targets from its own font size and weight tableSupports gradients, opacity, image fills, blend modes and effectsText in more than one colour, tested colour by colourSmall text that passes on contrast but is still hard to readAny two colours by hand with Manual contrastWorking with resultsFilter by pass, warn, or failOpen any result for the full breakdown, and try new colours before you change your designRe-test one result without running the whole scan againColours from your variables and styles show by name, not only as a valueColour values in 12 formats: HEX, HEXA, RGB, RGBA, HSL, HSLA, HSB, HSBA, CIE Lab, CIE LCH, Oklab and OKLCHFree for Insiders (join with your email)Jump directly to the layer each test result is fromAn image preview for every test resultPro - Try free for 14 days, no card neededDelete, ignore, and manually add tests to the resultsEither and Both, to compare WCAG and APCA side by sideSet a custom icon detection sizePro in every Design System Tools pluginOn the roadmapSaved results: keep test data on the canvas and reopen it laterTouch target sizesMore from Design System ToolsShadows, layered shadows from a light you can dragText to Lorem Ipsum, placeholder copy that keeps your layoutVideo, YouTube, Vimeo and Loom on the canvasEverything is at designsystemtools.comMade by Ben Walsh, a product designer who builds design systems.