Figmaでアクセシビリティチェック！プラグイン「A11y」の使い方

こんにちは、プロクラスの渡辺です！

今回は、デザインを作るときに切っても切り離せない「アクセシビリティ（カラーコントラスト）」のお話です。
最近、アクセシビリティのチェックが少し厳しめのデザインを用意する必要がありまして、「Figmaの中にカラーコントラストをパッと確認できる便利なプラグインないかな〜？」と調べてみました 💡
実際に使ってみたらすごく便利だったので、使い方やちょっとしたコツをご紹介したいと思います！

プラグイン「A11y – Color Contrast Checker」を追加しよう！

今回使用するのは**「A11y – Color Contrast Checker」**というプラグインです。「Figmaのプラグインの追加の仕方、たまに触ると忘れちゃうんだよね…」という方も多いのではないでしょうか（私も一瞬探しました 😉 ）。
追加方法はとっても簡単です！

Figmaの上部ツールバーにある「コンポーネント・アセット・プラグイン」のアイコンをクリック
検索窓に「A11y」と入力
一番上に出てくる「A11y – Color Contrast Checker」を選択して実行します！

これだけで準備完了です 😳

実際にアクセシビリティをチェックしてみよう！

使い方はびっくりするほどシンプルです！

コントラストを調べたいフレーム（またはレイヤー）を選択します。
先ほど追加したプラグインを実行すると、モーダル（操作画面の小窓）が立ち上がります。
青い「Check」ボタンをクリック！

これで選択したフレーム内のテキストと背景のカラーコントラストを自動で解析してくれます！8-O

判定結果の確認と調整のコツ

「Check」を押すと、画面内にエラー（コントラスト比が足りていない箇所）がある場合、以下のように教えてくれます！

小窓の中に「AA」「AAA」というマークが表示されていて、達成できているレベルには緑のチェックマーク、不合格なものには赤の×マークがつきます。

ちなみに、Webの基準としては以下のようなイメージです。

AAレベル：一般的なWebサイトや公的機関で求められる基準（背景と文字で4.5:1以上）
AAAレベル：さらに厳しい最高基準（背景と文字で7:1以上）

目的や案件で求められるレベルに合わせて調整していきましょう！

コントラスト比がかなり低い場合

テキストの色が背景と同系色だったり淡すぎたりすると、このようにAAもAAAも不合格になってしまいます 😥

スライダーで色を調整してみる

このモーダルの良いところは、「Text lightness」や「Background lightness」のスライダーを動かすと、リアルタイムで色の明度を変えて試せるところです！

スライダーを動かして「Contrast Ratio 4.5」以上になると、無事にAA・AAAともに緑のチェックマークが付きました！

調整のちょっとしたコツ！

この小窓上で「Done」ボタンを押すとFigma上の色も自動で変わるのですが、デザイン全体のバランスが急に崩れちゃうことがあります…。
なので、「小窓のスライダーでどれくらい明度を上げ下げすれば合格（4.5以上など）になるのか数値の目安をチェック」したら、適応はせずに手動でFigmaのカラーピッカーから微調整するほうが、体感的にとっても楽でした！ 😉