Figmaプラグイン「Contrast」とは？

「Contrast」は、Figmaのデザインにおける 色のコントラスト比の確認に特化テキストと背景のコントラスト比がWCAG基準を満たしているか自動で判定 し簡単にチェックできるプラグインです。
アクセシビリティチェックの中でも 色のコントラスト比の確認に特化 した軽量で使いやすいツールです。

「Contrast」で出来る事

🎨 コントラスト比チェック

選択したテキストと背景のコントラスト比をリアルタイムで表示し、WCAGのAAおよびAAA基準に適合しているかを確認。

👀 フレーム全体の一括チェック

フレーム内のすべてのテキストのコントラスト比を一度にチェックし、適合していない箇所を視覚的に強調表示。

「Contrast」の使い方手順

01. Figmaでデザインファイルを開く

02. Plugins → Contrast → Launch Stark を選択して起動

03. selectモードで調査したい要素（テキストと背景）を選択し、テキストと背景のコントラスト比が比をリアルアイムででチェック

04. scanモードで調査したいフレーム全体を選択し、フレーム内のすべてのテキストのコントラスト比を一括でチェック

05. 必要に応じて修正 → 再チェック

導入のメリット

料金プラン💰

「Contrast」のプラン概要（2025年5月時点）

プラン	内容	料金
Free	基本的なコントラスト比チェック機能が利用可能	無料
Pro	より高度な機能や追加のサポートが提供	月額 $10（年間契約の場合））

こんなチームにおすすめ

複雑なUIより「結果だけサッと見たい」というニーズのコントラストだけを重点的に確認したいチームに最適です。
アクセシビリティ初心者〜中級者のデザイナー向けで、他のチェック（色覚やフォーカス順など）は別ツールで管理しているチームにお勧めです。

アクセシビリティ対応を、もっとスムーズに

Contrastを使えば、デザインの段階でアクセシビリティ課題を可視化し、実装前にしっかり対策できます。
当社では、Contrastを活用したチェックフローのテンプレートや、クライアント提案用の説明資料もご用意しています。
ご希望の方は、ぜひお気軽にお問い合わせください✨