WEBアクセシビリティ対応
実はデザインの延長線上にある話でした
目次
「アクセシビリティ対応」という言葉を聞いて、何か特別な資格が必要だとか、一から勉強しなければいけないとか、そんなイメージを持っていませんか？
私もきちんと勉強しなければ！と意気込んで、制作の現場で実際にアクセシビリティを意識しはじめてみると、「あ、普段やってることの延長かも？」と気づいた瞬間がありました。
今回は、Webデザイナーが制作フローの中で押さえておきたいアクセシビリティのポイントを、配色・文字・UIの3つの観点から整理してみます。ぜひ最後まで読んでみてください！
アクセシビリティ対応って、何をすればいいの？
「アクセシビリティ」とは、一言でいえば「誰でも使えるようにする」ということ。高齢者や障害のある方はもちろん、明るい屋外でスマホを見ている人や、音を出せない環境で動画を見ている人なども含め、さまざまな状況にいるユーザーがサイトを使えるようにする取り組みです。
国際的なガイドラインとして、WCAG（Web Content Accessibility Guidelines）があります。その達成レベルは3段階に分かれています。
くわしい内容はこちらを参照してください↓
WCAG（Web Content Accessibility Guidelines）
| レベル | 概要 |
|---|---|
| レベル A | 最低限の基準。対応しないと一部のユーザーがアクセスできない |
| レベル AA | 一般的なWebサイト制作で推奨される基準 |
| レベル AAA | もっとも高い基準。すべてへの適用は必須ではない |
一般的なサイト制作では、レベルAA相当のクリアを目標にすることが推奨されています。ちなみに2024年4月に施行された改正障害者差別解消法により、民間企業にも「合理的配慮の提供」が義務化されたため、アクセシビリティはもはやオプションではなく、標準装備の感覚で考えておく必要があります。
① 配色：「なんとなく見やすい」を数値で裏付ける
デザインをするとき、「このテキストとこの背景、なんとなく読みにくい気がする」と感じて色を調整した経験はあると思います。アクセシビリティ対応では、その感覚をコントラスト比という数値に置き換えて判断します。
WCAGレベルAAの基準は次のとおりです。
| テキストの種類 | 必要なコントラスト比 |
|---|---|
| 通常テキスト（18px未満） | 4.5：1 以上 |
| 大きめテキスト（18px以上、または太字14px以上） | 3：1 以上 |
| UI要素・グラフィック | 3：1 以上 |
「感覚」ではなく「数値」で判断できるようになると、クライアントへの説明にも説得力が生まれます。FigmaやChromeの検証ツールでもコントラスト比を確認できますので、デザインチェックのタイミングで確認する習慣をつけると良いでしょう。
コントラスト比についてまとめた記事はこちら↓
「文字が見にくい」と言われたら？WCAGコントラスト基準で解決した話
色覚多様性への配慮も忘れずに
日本人男性の約20人に1人、女性の約500人に1人は何らかの色覚特性を持っているといわれています。また、印刷時やディスプレイの設定によっては、色が正しく伝わらないこともあります。
そのため、デザインでは「色だけに頼らない情報伝達」を心がけることが重要です。
たとえばグラフやチャートで凡例を色のみで区別するのは、アクセシビリティ上NGです。色に加えて、ラベルテキスト・テクスチャ（模様）・アイコンなどを組み合わせることで、色が見えなくても情報が伝わるように設計しましょう。
② 文字・フォント：どんな環境でも読めるサイズを選ぶ
文字のアクセシビリティで意識したいのは、主に「サイズ」と「フォント選び」の2点です。
スマートフォンで読むことを前提に、本文テキストは16px前後を基準にするのが安全です。デザイン的に小さくしたい気持ちはわかるのですが、12px前後まで落とすと多くのユーザーにとって読み負担が増します。
フォント選びでは、以下の点を意識するとアクセシビリティが向上します。
- 英数字が含まれる場合、「I（大文字i）」「l（小文字L）」「1（数字）」が区別しやすいフォントを選ぶ
- 細すぎるウェイト（Thin・ExtraLight）は、明朝体・ゴシック問わず読みにくくなるため本文への使用は避ける
- 行間（line-height）は1.5〜1.75倍程度を確保すると読みやすさが上がる
「デザインが垢抜けない」と感じるとき、実は文字の小ささや行間の狭さが原因になっているケースも多いです。アクセシビリティを意識することが、そのままデザインの読みやすさにつながる例でもあります。
③ UI操作：誰でも迷わず操作できる設計を
ボタンやリンク、フォームなどのUIパーツには、タップ・クリックしやすい十分な領域を確保する必要があります。
WCAGでは、インタラクティブな要素のサイズは最低24×24px以上（理想は44×44px以上）を確保することが推奨されています。スマートフォンでの操作性を考えると、44px以上を意識しておくと安心です。
また、フォームのエラー表示も重要なポイントです。「赤くなった」だけでは色覚多様性のユーザーに伝わらないことがあります。色の変化に加えて、「⚠️」や「！」「入力が必要です」といったテキストメッセージを必ず表示するようにしましょう。
まとめ：アクセシビリティは「プラスα」ではなく「標準装備」
今回ご紹介したポイントを振り返ります。
- 配色は感覚ではなくコントラスト比（数値）で判断する
- 色だけでなく、形・テキスト・模様などで情報を伝える
- 本文テキストは16px前後を基準に、ウェイト・行間も整える
- タップ領域は44px以上を意識する
- エラーや状態変化はテキストでも伝える
一つひとつは「知っていれば当たり前」のことでも、意識しないまま積み重なると、使いにくいサイトができあがります。普段のデザインチェックに「アクセシビリティ」という視点をひとつ加えるだけで、サイトの品質は着実に向上します。
見た目の美しさと、機能的な使いやすさ。その両立こそが、長く愛されるWebサイトをつくる鍵です。
