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

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

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

Contrast

Figma

Figma

https://www.figma.com/community/plugin/748533339900865323/Contrast

Figma 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 ...

Figma上のパネルから簡単にコントラスト比のチェックができます。
デザイン上でチェックしておけば、チェック後の細かい調整もしやすいです。

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

基本的な使い方

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

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

スコアの見方

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

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

試しに背景も黒色にして、背景色と文字色のコントラスト比を下げてみました。
結果点数は下がり、「FAIL」表示になりました。

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

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

グラデーションの場合

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

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

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

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

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

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