This hue shall pass

thishueshallpass.clearleft.comDR 73 正常访问 300 浏览

设计素材 An accessibility tool by Clearleft that checks every colour combination in a brand palette against WCAG contrast ratios, showing which pairs pass AA or AAA and helping fix failures.

立即访问收藏

主编点评

仅供参考

The matrix view makes it easy to spot which foreground and background pairs actually clear AA or AAA, and the wand nudges lightness just enough to pass without wrecking hue. Duplicating rows lets you experiment safely, though the tool only judges pairs you intend to use together. Best for designers

站点介绍

This hue shall pass is a browser-based accessibility checker from Clearleft focused on one narrow but important job: testing a digital colour palette for contrast. Rather than checking a single text-on-background pair, it lays out a matrix of every possible combination in your palette so you can see the full picture at once.

The core view flags which combinations meet your chosen pass criteria, with AA and AAA toggles and an option to hide failing pairs. Each colour can be adjusted with a lightness slider that works in Oklch, changing the L value while preserving hue so brand character survives the fix. A wand button handles near-misses by nudging lightness just enough to pass.

Because edits to a colour affect every combination involving it, the tool lets you duplicate a row and experiment on the copy without touching the original. This makes it practical to explore alternatives before committing changes to a live palette.

It suits designers, brand teams and front-end developers who need to validate a palette against WCAG before shipping. A sensible workflow is to load your colours, set the criteria you actually need, then fix only the foreground and background pairs you plan to use together rather than chasing every combination.