# Figmaで文字色と背景色のコントラスト比をチェックするプラグイン「Contrast」

URL: https://webrandum.net/figma-plugin-contrast/
公開日: 2022-03-17
更新日: 2022-03-16
カテゴリー: デザイン
タグ: Figma, Figmaプラグイン
出典: Webrandum（著者: サイトウ マサカズ）

アクセシビリティに配慮したデザインをするとき、考慮すべきポイントの1つに文字色と背景色のコントラスト比があります。

今回はFigmaでコントラスト比を簡単にチェックできるプラグインの「Contrast」についてまとめておきます。

## Contrast

![Contrast](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_1-9.png)

[![](https://www.google.com/s2/favicons?domain=www.figma.com)Figma![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fwww.figma.com%2Fcommunity%2Fplugin%2F748533339900865323%2FContrast?w=160)Figmahttps://www.figma.com/community/plugin/748533339900865323/ContrastFigma Community plugin — Contrast makes it easy to check the contrast ratios of colors as you work. Select a layer and Contrast will immediately look for the color directly behind your selection and serve up the contrast ratio along with passing and failing levels from the Web Content Accessibility Guidelines (WCAG). If ...](https://www.figma.com/community/plugin/748533339900865323/Contrast)

Figma上のパネルから簡単にコントラスト比のチェックができます。

デザイン上でチェックしておけば、チェック後の細かい調整もしやすいです。

最近はChrome拡張機能でチェックできますが、それだとコーディング時になってしまうので、やはりデザイン段階で考慮しておく必要があります。

## 基本的な使い方

プラグイン追加後に、メニューの［Plugins］→［Contrast］を選択するとパネルが表示されます。

![Contrastパネル](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_2-9.png)

あとはコントラスト比を計測したいオブジェクトを選択すると、パネルにスコアが表示されます。

### スコアの見方

コントラスト比は点数として表示されます。

白背景に黒テキストだとコントラスト比は「21」になり、近くなればなるほど数字は小さくなります。

![Contrastの計測（背景白色 / 文字黒色）](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_3-8.png)

基準に満たない場合は「FAIL」と表示されるので、「FAIL」にならないようにコントラスト比を調整しましょう。

| 区分 | 評価 | 備考 |
| --- | --- | --- |

| Normal Text | AA：4.5以上 AAA：7.0以上 | 24px未満の文字 |
| --- | --- | --- |

| Large Text | AA：3以上 AAA：4.5以上 | 24px以上の文字か、 19px以上の太字文字 |
| --- | --- | --- |

| Graphics | AA：3以上 | 枠線やアイコンなど |
| --- | --- | --- |

試しに背景も黒色にして、背景色と文字色のコントラスト比を下げてみました。

結果点数は下がり、「FAIL」表示になりました。

![Contrastの計測（背景黒色 / 文字黒色）](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_5-6.png)

文字色を白くしてコントラスト比を上げると、また点数は上がり問題なくなります。

![Contrastの計測（背景黒色 / 文字白色）](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_6-3.png)

このように結果を見ながら、コントラスト比に問題がないかチェックしていきます。

### グラデーションの場合

グラデーションの場合は「Enable Smart Sample for layer」をオンにすると、色を分割してそれぞれの色で計測してくれます。

「FAIL」がある場合は、分割した色の中からFAILになった数が表示されます（下の画像の場合は「14 of 32」なので、グラデーションを32個に分割して、そのうちの14個でFAILになっています）。

![グラデーションの場合のコントラスト比計測](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_7-1.png)

ちなみに「Enable Smart Sample for layer」がオフの状態でグラーデションの要素を選択すると下の画像のような表示になって確認できません。

### ページ全体をまとめてスキャン

「Scan」タブを選択すると、デザインデータ全体の要素をまとめて計測できます。

「Start Scan」を押して実行するだけです。

FAILがある場合は一覧になって表示されるのと、クリックすると対象のオブジェクトまで移動してくれるので、チェックして修正が非常にラクにできます。

![SCANタブ](https://webrandum.net/mskz/wp-content/uploads/2022/03/image_8-1.jpg)