PitaTools Guide
読みやすい図解画像を配色・文字・代替情報から作る手順
画像の目的を決め、配色、コントラスト、注釈、サイズ、本文と代替テキストを確認してアクセシブルな図解を作る方法です。
Free tool
カラーコントラスト確認を今すぐ使う
文字色と背景色のWCAGコントラスト比を確認。登録不要で、入力内容はブラウザ内だけで処理します。
画像で伝える情報と本文で伝える情報を分ける
図解を作る前に、装飾、操作説明、データ比較、写真のどれに当たるかを決めます。重要な結論を画像内文字だけにせず、本文からも同じ意味へ到達できるようにします。
元画像からカラーパレットを抽出する場合も、頻出色が文字色に適するとは限りません。ブランド色、背景色、強調色の役割を決め、色だけで正誤や状態を区別しない設計にします。
コントラストと注釈を実寸で確認する
文字色と背景色をコントラスト確認へ入れ、通常文字と大きな文字の基準を分けて確認します。半透明、グラデーション、写真背景では単一のHEX値だけで判断せず、最も読みにくい部分を実画面で見ます。
矢印、枠、番号を画像注釈で追加するときは、細すぎる線や色だけの区別を避けます。縮小後の掲載寸法で番号と説明が読め、注釈が元の重要部分を隠していないか確認します。
掲載サイズと代替情報を完成ページで検算する
画像を必要な寸法へリサイズし、PCとスマートフォンの実ページへ配置します。拡大しないと文字が読めない場合は画像を大きくするだけでなく、内容を分割するか本文の表へ置き換えます。
altは画像の見た目をすべて説明する欄ではなく、その場で画像が担う目的を伝える文です。隣接本文と同じ説明を繰り返さず、装飾画像では空文字を使用します。
参考資料
- W3C WCAG - Contrast Minimum
文字と背景の最低コントラストを理解するW3C公式資料です。
- W3C WAI - Images Tutorial
画像の目的別に代替テキストを考えるW3C公式資料です。