Relative Luminous Color Wheel — Color Picker & Contrast Checker (Contrast Lock) | WCAG 2.2 & APCA
Lock a WCAG/APCA contrast target, explore hue & saturation freely, and build accessible palettes.
Plugin Preview
About this plugin
A color picker and contrast checker built around accessibility. Every color on the wheel shares the same WCAG 2.2 relative luminance, so you can explore hue and saturation without changing how light or dark a color reads. Lock a contrast target — a WCAG 2.2 ratio (AA / AAA) or an experimental APCA Lc value — and your text/background pair stays pinned to the threshold while you design. Free, and fully self-contained: no network access.Why it's different:Most contrast tools check your colors after you pick them. This plugin locks contrast before you pick — the equal-luminance wheel guarantees that any color you choose keeps the contrast you set. No more back-and-forth between a color picker and a contrast checker.Highlights:🔒 Contrast lock — keep a color pair at AA, AAA, or an APCA Lc target while you tune hue & saturation. It never drifts below your threshold.✅ WCAG 2.2 + APCA — live pass/fail verdicts, including APCA font size/weight guidance.🎨 Apply to selection — fill the selected layers with your TEXT / BG color, or with any color saved in your palette.🎯 Import from canvas — pull a selected layer's fill into the TEXT or BG picker and check its contrast on the spot.✨ Create variables — generate a luminance-keyed tonal scale (Primitives: 50–950) plus Light/Dark semantic themes as Figma variable collections.🌗 Opacity-aware, colorblind (CVD) preview, and a resizable window.🤘 Fully self-contained — no network access. Nothing you pick ever leaves Figma.Also available as a free web app: https://relative-luminous-color-wheel.vercel.appMore free tools by the same author:🖥️ Color Bar & Test Pattern for Monitor Calibration — accurate color choices start with an accurate display. Give your monitor a quick visual check first: https://www.figma.com/community/file/1630255843100907608🖨️ Japanese Trim Marks & Bleed — a print-ready template with auto-resizing Japanese-style trim marks: https://www.figma.com/community/file/1619104443782158366―――――――――――――――――――――アクセシビリティのためのカラーピッカー&コントラストチェッカーです。ホイール上のすべての色が同一の相対輝度(WCAG 2.2)を持つ「等輝度カラーホイール」なので、色の明るさ(=コントラスト)を保ったまま、色相と彩度だけを自由に探索できます。コントラスト目標 — WCAG 2.2 の比率(AA / AAA)または実験的な APCA Lc 値 — をロックすれば、デザイン中もテキスト/背景のペアが基準を下回ることはありません。完全無料・ネットワークアクセスなしで動作します。▼ 既存ツールとの違いStark などの一般的なコントラストチェッカーは「選んだ後に検証」しますが、本プラグインは「選ぶ前にコントラストを固定」します。等輝度ホイール上のどの色を選んでも、設定したコントラストが維持されるため、カラーピッカーとチェッカーを往復する必要がありません。▼ 主な機能🔒 コントラストロック — AA / AAA / APCA Lc の目標値を維持したまま色相・彩度を調整。基準を下回りません。✅ WCAG 2.2 + APCA — 合否をリアルタイム判定。APCA のフォントサイズ/ウェイト目安も表示。🎨 選択レイヤーへ適用 — TEXT / BG の色やパレットに保存した色を、選択中のレイヤーへワンクリックで塗り。🎯 キャンバスから取り込み — 選択レイヤーの塗りを TEXT / BG ピッカーに取り込み、その場でコントラストを確認。✨ バリアブル生成 — 輝度基準のトーンスケール(Primitives: 50–950)と Light/Dark のセマンティックテーマを Figma バリアブルコレクションとして自動生成。デザイントークンやダークモード設計に。🌗 不透明度対応・色覚多様性(CVD)プレビュー・ウィンドウサイズ変更可。🤘 完全スタンドアロン — ネットワークアクセスなし。選んだ色が Figma の外に出ることはありません。Webアプリ版(無料): https://relative-luminous-color-wheel.vercel.app▼ 同作者の無料ツール🖥️ モニター調整用カラーバー・テストパターン — 正確な色選びは、正確な表示から。作業前のモニターの目視チェックに: https://www.figma.com/community/file/1630255843100907608🖨️ 納品用トンボ・塗り足しテンプレート — 自動リサイズの日本式トンボで印刷入稿データを作成: https://www.figma.com/community/file/1619104443782158366技術背景の解説記事(Zenn): HSLの明度でコントラストを測ってはいけない理由 — WCAG 2.2とAPCAの「相対輝度」入門※記事公開後、ここにURLを追記してください役に立ったら「いいね」やコメントをいただけると、今後の開発の励みになります🙏Version: 1.13.10
Plugin Details
| Version | 19 |
|---|---|
| Created | July 19, 2026 |
| Last Updated | August 12, 2026 |
| Category | Accessibility tools |
| Creator | Daishin Sakuma |
| Stats | 2 installs, 1 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Network Access:
Fully self-contained — the picker, fonts and all logic are inlined into the UI; the plugin makes no network requests.
- Editor Types:figma
- Allowed Domains:
- none
More Like This
Discover other plugins in the Accessibility tools category.