Figmaで学ぶアクセシビリティデザイン：色覚・文字サイズ・コントラストの基本

Posted on by

アクセシビリティデザインとは？

アクセシビリティデザインとは、
「誰にとっても使いやすいデザイン」を実現するための設計手法 のことです。

特にWeb・アプリにおいては、

  • 色覚多様性（色覚異常）
  • 視力の低下
  • 読みにくい配色
  • 小さすぎる文字
  • 操作しにくいUI

などを考慮し、情報を正しく、ストレスなく届けること が求められます。

Figmaにはアクセシビリティチェックに役立つツールやプラグインが多く、
初心者でも実践しやすいのが強みです。

色覚多様性への配慮（Color Accessibility）

色覚多様性とは？

多くの人は “赤・緑・青” の光の感じ方が異なるため、
配色によっては情報が見えづらくなる ことがあります。

特に以下の組み合わせが注意ポイント：

  • 赤 × 緑
  • 緑 × 茶
  • 青 ×紫
  • 薄いオレンジ × 薄い黄

Figmaでチェックする方法

色覚シミュレーション

Figmaでは以下の手順で色覚シミュレーションが可能です。

  1. 画面右上「プロトタイプ」 → 「アクセシビリティ」
  2. 色盲シミュレーションを選択（Deuteranopia / Protanopia など）

「色だけに頼らず、形・アイコンで伝える」
というのがアクセシビリティの基本ルール。

コントラスト比の設定（WCAG基準）

コントラスト比とは

コントラスト比は
テキストと背景の“明暗差” の数値。

WCAG（国際基準）では以下が推奨：

  • 通常テキスト：4.5：1 以上
  • 太字大文字（18px+）：3：1 以上

Figmaでのチェック方法

【Stark】プラグインを使う

コントラスト比を一瞬で測定できる最強のプラグイン。

  • 合格 → 緑表示
  • 不合格 → 赤表示

さらに色の代替案も提示してくれるので便利。

グレー背景は中途半端が危険

例

  • #AAAAAA × #FFFFFF → 読みにくい
  • #333333 × #FFFFFF → 読みやすい

「暗い or 明るい」をはっきりさせるのがコツ。

文字サイズ・行間の基準

読みやすい文字サイズとは？

Webでは以下のサイズが推奨です

役割推奨
見出し（H1）28〜32px
サブ見出し（H2）20〜24px
本文16px以上
補足14px（小さすぎ注意）

“14px以下は読ませる気がない” と言われることも

視力や環境により著しく読みにくくなるためです。

行間（Line Height）の基本

行間は「フォントサイズ × 1.4 〜 1.6」が読みやすい。

例
16px × 1.5 = 行間24px

行間が狭いと読みにくく、
広すぎると視線が迷ってしまうため balance が重要。

タップサイズ・余白（Touch Target）

アクセシビリティでは文字だけでなく、
タップできる領域（指で触れる範囲） も重要です。

WCAG推奨

  • ボタンサイズ：44px × 44px以上
  • アイコンボタン：40px以上
  • クリック領域は十分な余白を確保

FigmaではAuto Layoutで「padding（内側余白）」を設定し、
最低ラインのタップサイズを確保します。

Figmaで実際にアクセシビリティを改善する方法

背景と文字色をスタイル化しておく

Color Styleとして
「Text / High Contrast」
「Text / Low Contrast」
など役割で管理すればブレにくい。

コンポーネントの状態ごとにコントラストを確保

  • Hover
  • Active
  • Disabled

Disabledは薄くしがちですが、“読める薄さ” を守るのがプロの仕事。

アイコンとテキストの併記

「色だけで伝えない」がアクセシビリティの鉄則。

例

  • エラー → 赤 + アイコン（！）
  • 成功 → 緑 + チェックアイコン

プロトタイプで操作しやすさ確認

Tabキーでのフォーカス移動をチェックすることで、
キーボード操作のユーザビリティも確認できる。

チェックリスト：アクセシビリティ対応できてる？

最後に、Figmaプロジェクトで使えるチェックリストです。

【色】

✓ 色覚シミュレーションで誤解がないか
✓ 色だけに依存していないか（形・テキスト併用）

【コントラスト】

✓ WCAG基準（4.5：1 / 3：1）を満たしているか
✓ Light Mode / Dark Mode どちらも見やすいか

【文字】

✓ 本文16px以上か
✓ 行間は1.4〜1.6になっているか

【コンポーネント】

✓ Disabled状態でも読めるコントラストか
✓ アイコン＋テキストで認識しやすいか

まとめ：アクセシビリティは“誰のため”でもあり、“全員のため”でもある

アクセシビリティは「弱者のためのデザイン」ではありません。

  • 明るい場所
  • 小さい画面
  • 年齢による視力差
  • 色の感じ方の違い
  • スマホを片手で操作する状況

こうした“日常の不便”すべてに寄り添うのがアクセシビリティデザイン。

そしてFigmaは、このアクセシビリティを実践するための
最も使いやすいデザインツールです。

アクセシビリティは、デザインの優しさではなく
ユーザーへの「思いやりの設計」。