この記事でわかること

  • 文字の画像について定めた、WCAGの達成基準1.4.5の内容
  • ロゴのように画像のままでよい場合と、文字の画像に当たらない場合
  • 見出しとボタンをCSSで整えた本物の文字にする書き方と、画像にした版とブラウザで比べた結果
  • 自分のサイトの文字の画像を見直す手順

キャンペーンの見出しや申し込みのボタンを、デザインどおりに見せたくて、文字ごと画像にしていませんか。画像の中の文字は、利用者が大きさや色を変えて読みやすくすることができません。この記事では、見出しやボタンをCSSで飾った本物の文字にする方法を、WCAGの達成基準1.4.5を軸に整理します。

確認に使ったのは、W3Cが公開している達成基準1.4.5の解説(Understanding)と、技法C22・C30です。どれも2026年10月31日に原文を開いて読みました。比べた見出しとボタンは、この記事のために作ったものです。ツールやスクールを選んで勧めることはしません。

先に結論: 飾りはCSSで付け、文字は文字のまま置く

見出しやボタンの文字は画像にせず、HTMLの文字として置き、色・大きさ・背景はCSSで付けます。 ロゴのように文字の見た目そのものが大事なものは、画像のままでかまいません。

文字の種類 扱い
見出し・ボタン・メニュー CSSで整えた本物の文字
ロゴ・ブランド名 画像でよい(altを付ける)
グラフ・図・画面の写真の中 文字の画像に当たらない
書体の見本・古い手紙の写し 画像でよい(altを付ける)

文字の画像に関わる基準(1.4.5)

WCAG 2.2の達成基準1.4.5(レベルAA)は、使っている技術で同じ見た目を作れるなら、情報を伝えるには文字の画像ではなく文字を使うことを求めています。解説では、文字の大きさ・文字と背景の色・フォント・行間・そろえ方を、必要に応じて変えたい人がいるためだと説明しています。

技法C22は、文字の画像には、ブラウザの設定に合わせて大きさを変えられない、ブラウザの設定や利用者のスタイルシートの色で表示できない、ハイコントラストのようなOSの設定に従えない、といった問題があるとしています。

画像のままでよい場合と、当たらない場合

基準は、利用者の好みに合わせて見た目を変えられる文字の画像と、その見た目が伝える情報に欠かせない場合を例外にしています。注記では、ロゴやブランド名の一部になっている文字は欠かせないものとして扱うとしています。解説の例には、書体の見本や、時代を伝える元の手紙の写しも挙がっています。

文字の画像の定義の注記では、ほかに大事な見た目の内容を含む絵の一部になっている文字は、文字の画像に含めないとしています。グラフ・スクリーンショット・図がその例です。

書き方の例: 見出しとボタンをCSSで整える

次のHTMLは、グラデーションの背景に白い太字の見出しと、枠線の付いた丸いボタンを、画像を使わずに作った例です。大きさはremで指定しているので、利用者が文字を大きくすると一緒に大きくなります。

<style>
  .campaign-title {
    font-family: "Hiragino Sans", "Meiryo", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(90deg, #1d4ed8, #7c3aed);
    padding: 0.5em 1em;
  }
  .cta {
    font-size: 1.125rem;
    color: #1d4ed8;
    background: #ffffff;
    border: 2px solid #1d4ed8;
    border-radius: 999px;
    padding: 0.6em 1.4em;
  }
</style>
<h2 class="campaign-title">秋の無料相談会</h2>
<button type="button" class="cta">予約する</button>

フォントは、利用者の環境にありそうなものを最初に書き、最後に代わりのsans-serifを書いています。技法C22でも、環境にありそうなフォントを選び、代わりのフォントを指定するとしています。

手順: 自分のサイトの文字の画像を見直す

  1. 文字の画像を探す: 見出し・ボタン・メニュー・バナーで、画像の中に文字が入っているものを書き出します
  2. 例外かどうかを分ける: ロゴやブランド名、書体の見本のように、文字の見た目そのものが大事なものかを確かめます
  3. CSSで作れるかを試す: 色・大きさ・太さ・背景・角の丸みなど、画像で表していた見た目をCSSで作れるかを試します
  4. 画像を残すならaltを付ける: 例外として画像を残すものには、画像の中と同じ言葉の代わりの文字を付けます
  5. 文字を大きくして確かめる: ブラウザで文字を大きくし、見出しやボタンの文字が一緒に大きくなるかを見ます

試した結果

上の見出しとボタンと、同じ見出しをSVGの画像にして代わりの文字を付けた版を、手元だけで開ける小さなWebサーバーに置きました。ヘッドレスのChromeで2つを開き、違いを比べました。

  • 本物の文字の版では、ページから読み取った文字に「秋の無料相談会」と「予約する」が入っていました。画像の版では、ページの文字としては何も読み取れませんでした
  • 利用者のスタイルとして、ページ全体の文字を2倍にする指定を足すと、本物の文字の見出しは高さが80pxから160pxになりました。画像の版の画像は、64pxのまま変わりませんでした
  • 強制カラーのモードにすると、本物の文字の見出しは、背景のグラデーションが外れ、ブラウザが決める色の表示に切り替わりました

使ったブラウザは作業PC(Mac)のGoogle Chrome 156で、画面は出していません。読み上げソフトでの聞こえ方と、Windowsのハイコントラストの実際の画面は確かめていません。

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

目安は、「画像で表していた見た目を、CSSで作れるか」です。色・太さ・背景・枠線・影くらいなら、CSSで作れます。

文字を斜めに並べる、文字の形そのものを加工する、といった凝った見た目は、CSSだけでは難しいことがあります。デザインを変えるか、画像のまま同じ言葉を本物の文字でも載せるかは、デザインを決めた人と相談して決めます。CSSの書き方に慣れていないなら、Webデザインを学べる講座で、作った見出しを講師に見てもらう方法もあります。

つまずきやすいところ

まとめ

  • 見出し・ボタン・メニューの文字は画像にせず、本物の文字にしてCSSで飾ります
  • ロゴやブランド名、書体の見本のように、見た目そのものが大事な文字は画像のままでかまいません
  • グラフ・図・画面の写真の中の文字は、文字の画像に当たりません
  • 画像を残すときは代わりの文字を付け、文字を大きくして確かめます