Webサイトの文字が小さすぎると、情報を読むための負担が増えます。
一方、最初から大きく表示するだけでは、利用者が文字を拡大したときの重なりや欠落までは防げません。
テキストサイズの設計では、初期表示の読みやすさと、利用者が表示を変えても内容と機能を使えることの両方を確認します。
この記事では、その判断をWCAG 2.2の要件、CSSの単位、実装例、テスト手順の順に整理します。
テキストサイズ設計で解決したい問題
文字の見え方は、視力、年齢、画面の大きさ、閲覧距離、ブラウザの設定などによって変わります。
同じ指定値でも、すべての利用者に同じ読みやすさを保証できるわけではありません。
そこで、設計時には次の三つを分けて考えます。
- 初期表示の読みやすさ：本文、見出し、注釈を無理なく判別できる大きさと間隔にする。
- 文字の拡大：ブラウザのズームや文字サイズ変更を妨げず、拡大後も文章や操作項目を失わない。
- 狭い表示領域への対応：画面が狭い場合や拡大時に、内容が自然に折り返されるようにする。
この三つを一緒に確認すると、「通常表示では読めるが、拡大するとボタンの文字が切れる」といった問題を見つけやすくなります。
WCAG 2.2が求める文字の拡大
Web Content Accessibility Guidelines（WCAG）は、Webコンテンツのアクセシビリティを評価するための国際的なガイドラインです。
WCAG 2.2の達成基準1.4.4「テキストのサイズ変更」では、字幕と画像化された文字を除くテキストを、支援技術なしで200％まで拡大しても、内容や機能が失われないことを求めています。
確認する対象は本文だけではありません。
ナビゲーション、ボタン、入力欄のラベル、エラーメッセージなども、文字が切れたり別の要素に隠れたりしないかを確認します。
達成基準の実装方法と失敗例は、サイト内のWCAG 2.2「1.4.4 テキストのリサイズ」実装とテストのガイドで詳しく確認できます。
16pxは出発点であり、一律の適合条件ではない
本文を16px相当、補足を14px相当から検討する方法は、実務上の出発点として使えます。
ただし、WCAG 2.2は本文の最低サイズを一律に16pxと定めていません。
同じ16pxでも、書体、文字の太さ、行の長さ、背景とのコントラストによって読みやすさは変わります。
指定値だけで判断せず、実際の文章を入れた画面で本文と補足を区別できるか、拡大操作が必要な利用者を妨げないかを確認します。
行間の設定値と上書きへの対応を分ける
本文の行高を1.5から1.8程度にする方法も、読みやすさを検討する際の出発点になります。
しかし、言語、書体、行の長さによって適切な値は変わるため、数値だけを固定的な正解として扱うことはできません。
WCAG 2.2の達成基準1.4.12「テキストの間隔」が求めているのは、行高や文字間隔を特定の値で初期表示することではありません。
利用者が行高、段落後の間隔、文字間隔、単語間隔を上書きしたときに、内容や機能が失われないことを確認する基準です。
とくに日本語の文字間隔は、値を大きくすれば必ず読みやすくなるわけではありません。
初期値を調整する場合も、実際の書体と文章で読みやすさを確認し、利用者側の設定を妨げないCSSにします。
px、rem、emの使い分け
相対単位は、別のサイズを基準にして値が決まる単位です。
テキストと周辺要素の関係を保ちやすいため、拡大に耐える設計で役立ちます。
| 単位 | 基準 | 使いどころ |
|---|---|---|
px |
CSSピクセル | 細かな寸法を直接指定しやすい。フォントに使う場合もブラウザのズームは働くが、周辺要素との比率は別途設計する。 |
rem |
ルート要素の文字サイズ | 本文や見出しなど、ページ全体で一貫した文字階層を作りやすい。 |
em |
その要素が継承した文字サイズ | ボタンやカードなど、部品の文字と余白を一緒に拡大しやすい。入れ子では倍率が重なる点に注意する。 |
% |
プロパティに応じた親要素などの値 | ルートの文字サイズをブラウザ既定値に連動させる場合などに使える。 |
単位をremに変えるだけでアクセシビリティが確保されるわけではありません。
固定された高さ、折り返せない行、狭すぎるボタンが残っていれば、文字を拡大したときに内容が欠けます。
ブラウザの既定値を尊重する基本例
html {
font-size: 100%;
}
body {
font-size: 1rem;
line-height: 1.6;
}
h2 {
font-size: 1.75rem;
}
.caption {
font-size: 0.875rem;
}htmlを100％にすると、ルートの文字サイズはブラウザ側の設定に連動します。
そのうえで本文を1remとし、見出しや補足をルート基準で組み立てると、文字階層を管理しやすくなります。
ここに示した値は設計例です。
採用する書体と実際のコンテンツを使い、本文、見出し、補足の差が視覚だけに頼りすぎず伝わるかを確認します。
文字サイズと一緒に整える要素
読みやすさは文字サイズだけでは決まりません。
本文を大きくしても、行が長すぎる、コントラストが不足している、見出しとの違いが分かりにくいといった状態では、文章を追いにくくなります。
- 見出し：本文より大きくするだけでなく、正しい見出し要素を使って構造を示す。
- 行間と段落間：行同士や段落同士が詰まりすぎないようにし、利用者による間隔の上書きにも耐えられるようにする。
- コントラスト：文字と背景を区別しやすくし、細い文字や淡い色だけで補足情報を表現しない。
- 一行の長さ：広い画面で本文が横に伸び続けないよう、コンテンツ領域の幅を調整する。
- 意味のある階層：大きさだけで章立てを表さず、
h2とh3を順序どおりに使う。
ロービジョンの見え方と文字以外の配慮も含めて検討する場合は、ロービジョンに配慮したWebデザインの基本も参考になります。
拡大しても崩れないレイアウト
リフローとは、表示領域の幅に合わせて文章や部品が並び直され、内容を読み進められる状態を指します。
文字を拡大したときも、本文が画面の外へ伸び続けず、必要に応じて一列に並び直される設計が必要です。
固定した高さとoverflow: hiddenの組み合わせ、狭い幅に固定したボタン、文字の上に重なる絶対配置などは、拡大時の欠落につながります。
レイアウトには内容に応じて広がる領域を使い、FlexboxやGridの折り返しを許可します。
.text-box {
font-size: 1rem;
line-height: 1.6;
height: auto;
}
.layout {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.layout > * {
flex: 1 1 18rem;
min-width: 0;
}この例は、内容量に応じて要素の高さが伸び、横幅が足りないときは部品が折り返す構成です。
実際の適合性は、このCSSだけで判断せず、ページ全体を拡大して確認します。
ズーム時の横スクロールと例外を含む詳しい考え方は、サイト内のWCAG 2.2「1.4.10 リフロー」の実装と確認方法で解説しています。
小さな固定文字を改善する例
問題が起きやすい指定
<p style='font-size:12px; height:18px; overflow:hidden;'>
補足情報がここに入ります。
</p>文字が小さいうえに高さが固定されているため、文字を拡大すると文章の一部が隠れる可能性があります。
補足情報であっても、読めない状態にしてよいわけではありません。
内容に合わせて広がる指定
<p class='caption'>補足情報がここに入ります。</p>.caption {
font-size: 0.875rem;
line-height: 1.6;
}相対単位を使い、高さを固定しなければ、文字サイズの変更に合わせて段落が広がります。
ただし、0.875remで十分に読めるかは、書体や表示環境を含めて確認します。
テキストサイズを確認する手順
- 通常表示を確認する：本文、見出し、補足、ボタン、入力欄の文字を実際のコンテンツで確認する。
- 200％まで拡大する：ブラウザのズームや文字サイズ変更を使い、文字の欠落、重なり、操作不能がないかを確認する。
- 狭い表示領域を確認する：文章や部品が折り返され、読むために縦と横を何度も往復する状態になっていないかを見る。
- テキスト間隔を上書きする：行間や文字間隔を利用者側で変更しても、内容と操作項目が失われないかを確認する。
- 複数の環境で試す：デスクトップとモバイルの主要なブラウザで確認し、可能であれば利用者による評価も行う。
自動チェックだけでは、文章の読みやすさや拡大後の操作のしやすさまでは判断できません。
開発者自身が拡大して操作し、実際の利用環境でも確かめます。
実装前後のチェックリスト
- 本文の16px相当を機械的な適合条件にせず、書体と実際の画面で読みやすさを確認したか。
remやemを使う目的を理解し、固定高や切り抜きが残っていないか。- 本文、見出し、補足の関係が、文字の大きさだけに依存していないか。
- 200％の拡大で、本文と操作項目の内容や機能が失われないか。
- 狭い表示領域で内容が折り返され、必要のない横スクロールが生じていないか。
- 行間や文字間隔を利用者が変更しても、文字やボタンが欠けないか。
読みやすさと変更への強さを両立する
アクセシブルなテキストサイズ設計は、特定の数値を指定して終わる作業ではありません。
読みやすい初期値を選び、利用者の設定を尊重し、拡大後も内容と機能を保てるレイアウトにします。
まず本文を含む文字階層を相対単位で整理し、200％拡大、狭い表示領域、テキスト間隔の上書きを順に確認してください。
この確認を設計と実装の両方に組み込むと、利用環境が変わっても情報を受け取りやすいページに近づきます。