AI画像に重ねる文字のコントラストを確認する方法

AI画像に重ねる文字のコントラストは、レイアウトごとに文字のすぐ下にある背景を測ります。まず一番狭いトリミングから確認します。見出しが折り返したり、明るい場所に重なったりしやすいためです。文字を編集できる状態にして、位置の変更、背景の部分的な暗さ調整、単色の背景のいずれかを試します。最後は実際の文言とフォントで再確認します。

文字ごとにコントラストの目標を決める

Webコンテンツについて、W3CのWCAG 2.2レベルAAの解説では、通常の文字に4.5:1以上、定義上の大きな文字に3:1以上を求めています。見出しという名前だけでは決まりません。表示時の文字サイズと太さを確認します。見出しの下に添える小さな文字には、引き続き4.5:1が必要な場合があります。これらは最低値です。余裕を持たせれば、ひと目で読み取りやすくなります。

文字が実際にかかる場所を測る

右に淡い花瓶、左に濃い青の壁がある陶芸教室のバナーを考えます。デスクトップでは白い見出しが青い壁に収まります。スマートフォンの高さが低いトリミングでは画像がずれ、最後の行が薄茶色に光る部分を横切ります。画像全体の平均色ではこの箇所を見落とします。表示サイズのプレビューで文字を一時的に隠し、画像と暗くするためのレイヤーは残します。文字の下、特に白い文字の下の明るい場所を測ります。計算には文字の縁の中間色ではなく、指定した文字色を使います。

強い箇所と弱い箇所を比べる

例として、白と濃い青 #253343 は約12.86:1、白と薄茶色 #B9A78E は約2.34:1です。これらは説明用で、カバー画像から採取した色ではありません。青い場所は通常の文字の基準を超えます。薄茶色の場所は両方の基準を下回ります。実際のサイズで行全体を読み、文字のある箇所の最低値を確認します。模様や輪郭が多い箇所は複数の点を測ります。

トリミングが変わっても使える対策を選ぶ

まず見出しを背景の安定した場所に移し、長い翻訳のための余白を確保します。画像を全面に敷く必要があるなら、部分的なグラデーションで花瓶の明るさを残しつつ文字の背景を暗くできます。追加後に最も弱い箇所を測ります。表示によって文字が大きく動く場合や写真を頻繁に変える場合は、単色の背景を敷くか画像の外に文字を置きます。白と単色の #222222 は約15.91:1です。背景が写真の一部を覆うので、構図に余裕を取ります。

納品時のレイアウトでもう一度確認する

最も広い画面と狭い画面、長い翻訳、見出しの下で折り返す補足文をプレビューします。見出しを編集できる状態にし、承認済みのデザインと一緒にトリミングと背景の設定を保存します。測定方法は W3Cの解説 と G18の手法、トリミングは Tongの画像トリミングガイド、ほかの制作手順は Tong Academy を参照してください。