バナーのアクセシビリティ｜コントラスト比・文字の大きさ・色の使い方の基準と確かめ方

バナーは作った大きさのまま表示されるとは限りません。たとえば1000×1000ピクセルのバナーを、画面幅が360ピクセルのスマートフォンで横いっぱいに表示すると、文字は約0.36倍の大きさになります。

弊社では、1000×1000ピクセルで作る場合、いちばん小さい文字でも36ピクセルくらいを目安にしています。この大きさでも、上の例のスマートフォンでは約13ピクセルで表示されます。

• 注意書きなどの小さい文字も、目安より小さくしない
• 細い明朝体や細いゴシック体は、小さい文字では太めのウエイトにする
• 作ったら、実際のスマートフォンで縮小した見え方を確かめる

フォントの選び方はバナーのフォントの選び方にまとめています。

先天的に色の見え方が違う人は、日本人の男性で約5%、女性で約0.2%とされています（出典：先天色覚異常ってなんですか？（日本眼科医会））。赤と緑、赤と黒などは、人によって見分けにくい組み合わせです。

• 「赤い文字の商品がセール対象」のように、色だけで区別しない。「SALE」などの文字やマークも添える
• 価格や割引の数字は、色に加えて大きさや太さで目立たせる
• 作ったバナーをグレースケール（白黒）にして、伝えたいことが読めるか確かめる

配色の決め方はバナーの配色の決め方でも紹介しています。

WCAGでは、1秒間に3回より多い点滅をしないこと（2.3.1）、自動で動き5秒より長く続くものには止める手段を用意すること（2.2.2）を求めています。広告の側でも、Google広告は画像の品質のポリシーで、点滅などの注意をそらす画像を認めていません（出典：画像の品質｜Google 広告ポリシー ヘルプ）。

• アニメーションは短くし、最後のコマで伝えたいことが全部読めるようにする
• 速い点滅や強い光の明滅は使わない

動くバナーの作り方はアニメーションバナーの作り方にまとめています。

自社サイトに貼るバナーには、画像の内容を伝えるaltテキストを付けます。画面を読み上げる機能を使う人は、altテキストでバナーの内容を知るためです（WCAG 1.1.1）。

書き方	例
バナーに書いてある文字をそのまま書く	秋の新作コート 最大30%オフ 10月31日まで
リンク先が分かるようにする	資料ダウンロード：バナー制作の料金表
「バナー」「画像」だけにしない	（悪い例）バナー画像

広告として配信するバナーでは、altテキストの扱いは媒体ごとに異なるため、画像の中の文字を読みやすく作ることがいっそう大切になります。

• 文字と背景のコントラスト比が4.5:1以上（大きな文字は3:1以上）
• ボタンや図形とまわりの色の比が3:1以上
• 1000×1000ピクセルなら、いちばん小さい文字が36ピクセルくらい以上
• 色だけで区別している情報がない（白黒にしても伝わる）
• 点滅は1秒に3回以下、アニメーションは短い
• 自社サイトに貼るバナーにはaltテキストを付けた

どれも読みやすさを上げる工夫で、アクセシビリティのためだけでなく、すべての人に伝わるバナーにつながります。