この記事でわかること

  • 文字の大きさと行間について、W3CのWCAGが求めている基準
  • 基準は「この値にする」ではなく「利用者が変えても欠けない」こと
  • 文字を200%に拡大したときと、行間・字間を広げたときの確かめ方
  • 崩れやすい作りと、つまずきやすいところ

Webサイトの文字の大きさや行間は、見た目の好みで決めがちです。ただ、見る人の中には、文字を大きくしたり、行間を広げたりしないと読めない人もいます。この記事では、W3Cのアクセシビリティの基準であるWCAGをもとに、文字の大きさと行間を決めるときの考え方と、確かめ方を紹介します。

この記事の基準と解説は、W3CのWCAG 2.2と、その解説(Understanding)のページで2026年10月22日に確かめたものです。特定のツールやスクールは勧めず、法律上の義務があるかどうかは扱いません。

先に結論: 利用者が変えても欠けない作りにする

先に結論を書くと、文字の大きさと行間は、決めた値そのものよりも、利用者が文字を200%に拡大したり、行間・字間を広げたりしても、文字が切れたり重なったりしない作りにすることが大切です。 WCAGの達成基準で目安になる値は、次のとおりです。

確かめること 目安
文字の拡大 200%まで
行の高さ 文字の1.5倍
段落の後の余白 文字の2倍
文字の間 文字の0.12倍
単語の間 文字の0.16倍

基準は「この値にする」ではない

WCAG 2.2の達成基準1.4.12(テキストの間隔、レベルAA)は、利用者が次のように広げても、内容や機能が失われないことを求めています。

  • 行の高さ: 文字の大きさの1.5倍以上
  • 段落の後の余白: 文字の大きさの2倍以上
  • 文字の間: 文字の大きさの0.12倍以上
  • 単語の間: 文字の大きさの0.16倍以上

WCAGの注記では、コンテンツがこれらの値を使うことは求められていないとしています。求めているのは、利用者が自分で間隔を変えたときに、内容や機能が失われないことです。つまり、デザインの行間を必ず1.5倍にする決まりではなく、広げられても崩れない作りにする決まりです。

日本語のページで気をつけること

W3Cの解説では、日本語のように段落の後の余白を使わない言語では、利用者が段落の余白を変えることは少ないとしています。単語の間を空けない日本語では、単語の間の設定を変えても変化が無いのは、想定どおりだとされています。それでも、行の高さと文字の間は日本語でも変わるため、広げたときに崩れないかを確かめます。

文字を200%まで拡大しても欠けないようにする

達成基準1.4.4(テキストのサイズ変更、レベルAA)は、キャプションと文字の画像を除き、支援技術を使わずに文字を200%まで拡大しても、内容や機能が失われないことを求めています。W3Cの解説では、見え方の弱い人が、画面拡大のソフトを使わなくても、文字を大きくして読めるようにすることが目的だとしています。

W3Cの解説では、ブラウザなどの拡大の仕組みのうち、少なくとも1つで200%に拡大できれば、この基準を満たすとしています。拡大の仕組みはブラウザの役目で、作る人の役目は、拡大のじゃまをしないコンテンツを作ることです。

200%の拡大に対応する方法の例として、W3Cの解説では、文字の大きさを%やemで指定する方法、文字を入れる箱の大きさをemで指定する方法などが挙げられています。反対に、200%に拡大したときに、文字や画像・操作する部品が切れたり隠れたりするのは、この基準を満たさない例とされています。

手順: 拡大と間隔の広げ方を変えて確かめる

確かめるときは、ページの種類ごとに、次の順で見ていきます。

  1. ブラウザで200%に拡大する: 見出し・本文・ボタン・入力欄の文字が、切れたり重なったりしないかを見ます
  2. 行間と字間を広げる: 下のCSSを自分のブラウザで一時的に当て、文字が箱からはみ出したり、ほかの文字と重なったりしないかを見ます
  3. 崩れた所を書き出す: どのページの、どの部品が崩れたかを書き留めてから直します

W3Cの解説では、利用者が間隔を変える方法は、ユーザースタイルシートや拡張機能など、利用者が選ぶとしています。次のCSSは、達成基準1.4.12の値で行間などを広げた状態を作る、確認用の例です。自分のブラウザの拡張機能などで一時的に当てるもので、サイトのCSSには入れません。表示が変わるだけで、ページのデータは変わりません。

/* 確認用: 達成基準1.4.12の値で間隔を広げる(一時的に当てて、確かめたら外す) */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}
p {
  margin-bottom: 2em !important;
}

W3Cの解説では、間隔を広げた状態で、文字がそれを入れる箱の中に収まり、切れていないことと、ほかの箱と重なっていないことを確かめるとしています。

見やすさのためのより高い目安

達成基準1.4.8(視覚的提示、レベルAAA)には、文章のまとまりについて、さらに高い目安があります。

  • 1行の長さ: 80文字以内(日本語などは40文字以内)
  • 両端揃えにしない: 左右の両端をそろえる配置にしない
  • 行の間隔: 段落の中では1.5行分以上

WCAGの注記では、ここでもコンテンツがこれらの値を使うことは求められておらず、利用者がこれらを変えられる仕組みがあればよいとしています。仕組みはブラウザなどが提供してもかまいません。レベルAAAの目安なので、すべてを満たすのが難しいときは、本文の1行の長さと行間から見直します。

自分で直すか、相談するかの判断

迷ったときは、「崩れた原因が、CSSの1か所で直せるか」で決めます。文字の大きさを相対的な単位に変える、高さを固定した箱をやめる、といった直し方で済むなら、自分で直して、もう一度同じ手順で確かめます。

テンプレートや外部の部品の作りが原因で、どこを直せばよいか分からないときは、サイトを作った人や、Webデザインを教えている人に、崩れた画面を見せて相談します。文字と背景の色の見やすさはWebデザインで文字と背景のコントラストを確かめる方法、作品集で見せるときの説明の書き方は未経験からWebデザインのポートフォリオを作る手順で紹介しています。

つまずきやすいところ

  • 高さを固定した箱に文字を入れる: 行間を広げたり拡大したりすると、文字が箱からはみ出して切れます。W3Cの解説では、拡大した文字がCSSのoverflowで切られていないかを確かめる手順も示されています
  • 文字を画像にする: 達成基準1.4.4では、文字の画像は対象外ですが、画像の文字は拡大や間隔の変更でほかの文字のように変わりません。見出しなどを画像にするときの扱いは、Webデザインで画像の代替テキスト(alt)を書く方法で紹介しています
  • 画面の幅に合わせた単位だけで文字の大きさを決める: W3Cの解説では、画面の幅や高さを基準にした単位を誤って使い、文字が拡大されないことを、基準を満たさない例に挙げています
  • 確認用のCSSを残す: 確かめた後は必ず外します。サイトのCSSを直すときは、確認用の値をそのまま写すのではなく、崩れた部品の作りを直します

まとめ

  • WCAGが求めているのは、決めた値ではなく、利用者が文字を200%に拡大したり、行間・字間を広げたりしても内容が欠けないことです
  • 行の高さは文字の1.5倍、段落の後は2倍、文字の間は0.12倍、単語の間は0.16倍まで広げても崩れないかを確かめます
  • 確かめるときは、ブラウザの拡大と、確認用のCSSを一時的に当てる方法を使います
  • 高さを固定した箱や文字の画像は崩れやすいので、相対的な単位と、中身に合わせて広がる箱にします