文字や背景色などのコントラスト比を
調べるには「Contrast」プラグインを使います。

Hanai Akihiro

Design

【動画あり】Figmaのプラグイン『Contrast』『A11y – Color Contrast Checker』の使い方

Post:2024.03.19 / Rewrite : 2024.03.19

View

558 views

コントラスト比は、広告バナーやWebサイトで背景色に対して読みやすい文字色を選択したり、アクセシビリティ観点から誰でも読みやすいデザインを作る上で非常に重要です。

figma-plugin-contrast

動画で見る|Figmaのプラグイン『Contrast』『A11y – Color Contrast Checker』の使い方

Figmaのプラグイン『Contrast』の使い方

figma-plugin-contrast

1.リソースから、Contrastを検索・起動します。

2.「Select」モードでは、要素ごとのコントラスト比を計測できます。

この状態で、コントラスト比を測りたいテキストやオブジェクトを選択すると、ポップアップに「FAIL」や「AA」といったスコアが表示されます。

3.「Scan」モードでは、ページ全体の要素をまとめて計測できます。

全体を俯瞰して調整したい場合は非常に効率的に計測できます。

Figmaのプラグイン『A11y – Color Contrast Checker』の使い方

figma-plugin-A11y – Color Contrast Checker

1.チェックしたいフレームを選択し、Checkをクリックします。

2.問題のある要素を確認し、UIから問題のないコントラスト比を算出する事ができます。

Contact

お問い合わせ

こんなことを伝えたい!こんな表現がしたい!
これくらいの期間・予算で考えてるんだけど...
まずは、あなたのご要望をお聞かせください。
誠心誠意、お応えいたします。

contact
tel tel