はじめに
2026年4月24日に参加したFriend of Figma Osaka 「プラグイン特集」というFigmaのイベントに参加しました。
そのときに教えていただいた 「プラグインを使わずにコントラスト比を確認する方法」 を紹介したいと思います。
目次
コントラスト比（Contrast Ratio）とは
色と色を比較した時の視認性を数値で示したものです。
簡単に言うと、「どれくらい明るさの差があるか」 を数値で表したものです。
近年アクセシビリティと言う言葉を目にする機会が増えましたが、この色の組み合わせとコントラスト比やアクセシビリティに深く関わる大事な要素です。
アクセシビリティとは
- 誰もが情報やサービスを利用しやすい状態
- できる限り多くの人々が楽しめる体験をデザインすること
- すべてのユーザーがウェブサイトやオンラインサービスを確実に利用できるようにするための品質基準
- 企画・設計からデザイン、開発、運用など、すべてのプロセスにおいて考慮が必要となる概念
などを指します。
比率はどれくらいがいい？
コントラスト（最低限）であるレベルAAを満たすには以下の条件が必要です。
テキストまたは文字・画像は、背景色に対して少なくともコントラスト比4.5:1以上が必要になります。
サイズの大きなテキスト（24 CSS px以上のテキストまたは18 CSS px以上の太字テキスト）および文字画像の場合は、背景色に対して少なくともコントラスト比3:1以上が必要になります。
コントラスト（高度）であるレベルAAAを満たすにはもっと厳しい条件になります。
詳しくはこちらのデジタル庁デザインシステムβ版 v2.14.0をご覧ください。
サクッと確認する方法
コントラスト比を確認したい要素（背景やテキスト）を選択後、右サイドの「塗り」の四角い部分をクリック
するとコントラスト比の数値と結果が表示されます。
下記のキャプチャでは「✅ AA」となっているので、コントラスト（最低限）であるレベルAAをクリアしています。
これだけで確認できます！
他の機能も見ていきます。
コントラスト比の数値をクリックすると、前景と背景のカラーコードを一緒に確認することができます。
右側にあるアイコンをクリックすると、カテゴリーを選択できます。
自動では「グラフィック」のモードになっています。
「大きなテキスト」「通常のテキスト」「グラフィック」 の3種類を選択できます。
レベルAAがクリアしていない場合、「✅ AA」ではなく「🚫AA」のようなマークになります。
カラーピッカーで色を変えながら、リアルタイムで確認できるのが便利です。
注意事項
以下のパターンの場合はコントラスト比を確認できませんでした。
❌ 白色ではない背景色の上にボーダーがあるパターン
ただし白色背景の上にボーダーがあるパターンは確認できました。
他の確認方法
コントラストチェッカーを使用
こちらのサイトが見やすいので、よく使用していました。
カラーコードを入力したり、カラーピッカー（丸い部分）で色を選択して確認できます。
OKの場合
NGの場合
Figmaのプラグイン「Contrast」を使用
こちらのプラグインを使用していました。
Figma | コントラストアクセシビリティプラグインツールにも載っており、人気のあるプラグインだと思います。
（1）コントラスト比を調べたい要素をクリック
（2）右クリック → プラグイン → 「Contrast」
「プラグインを管理」をクリックすると表示されます。
私の場合は過去に使用していたので「最近」のところに表示されます。
（3）結果を確認する
OKの場合
NGの場合
参考サイト
おまけ
Friend of Figma Osaka 「プラグイン特集」参加後の私のコメントが掲載されていました。
