【Photoshop】コントラスト比の担保と可読性
こんにちは、22新卒デザイナーの八巻です。
デザイナーとして実務に入り、学生の頃とは求められる力が変わってきました。
第一ステップとして頂いた、Photoshopを使用したバナー制作のお仕事。
テキストのコントラスト比の担保には、複数の方法があり、バナーのクリック率にも大きく関わってくる重要な要素です。
今回はテキストのコントラスト比担保のためのアプローチをまとめておこうと思います。
コントラスト比とは
Web Content Accessibility Guidelines (WCAG) 2.0、ウェブコンテンツをよりアクセシブルにするための一定の基準を設けたガイドラインで定められています。
明るさや暗さの差の大きさを表す指標であり、テキストや画像がどの程度目立つか、読みやすいかを決める要素の一つです。
コントラスト比は、明るさや暗さの値を「数値化して比較する」ことで求められます。明るさの値を0~255で表したグレースケール値を使用して比較し、この値が高いほど明るく、低いほど暗い色になります。
例えば、黒(#000000)のテキストと白(#ffffff)の背景の場合、黒のグレースケール値は0、白のグレースケール値は255なので、
(明るい側の値 + 0.05) ÷ (暗い側の値 + 0.05)
上記の式で、コントラスト比は「21」あると求められます。
Photoshopでのコントラスト比担保のためのアプローチ3つ
このnoteでは、実際にPhotoshopを使用した業務での、コントラスト比担保のための、テキスト要素の加工表現を3つまとめます。(Photoshop2022 23.4.1)
今回は淡い色合いの背景に、白(#ffffff)のテキストを載せます。
バナーサイズは640x232、テキストサイズは40px、フォントはNoto Sans CJK JP Boldを使用、コントラスト比のチェックは下記コントラストチェッカーで行います。
https://lab.syncer.jp/Tool/Color-Contrast-Checker/
現在、背景色は #ded3cd、白テキストとのコントラスト比は約1.47です。全然足りない。3は欲しいところです。
①光彩(外側)
レイヤースタイル＞光彩（外側）
今回の背景素材だと、乗算で100%でかけないとコントラスト比3を超えることが難しかったです。背景にある色をスポイトで拾い、使用することで不自然にならないように調整しやすいかと思います。
最もさりげない担保方法が光彩（外側）かと考えています。
②ドロップシャドウ
レイヤースタイル＞ドロップシャドウ
今回は背景の雰囲気に合わせ、焼き込み（リニア）でシャドウをかけました。
あまり光彩と変わらないように感じますが、光彩（外側）のさりげなさに近づけるのは調整がいるかなと思います。
光彩(外側)と組み合わせる方法もよく使います。
③テキスト選択範囲で乗算背景を切り抜く
①背景素材を複製＞テキストレイヤーを選択(Com＋レイヤークリック)＞
②テキストの選択範囲を変更＞選択範囲の拡張＞
選択範囲を変更＞境界をぼかす＞
③複製した背景画像(乗算)にマスク＞
④複製した背景画像にぼかし（ガウス）かける＞不透明度など調整
工程が段違いに多いですが、背景画像を使用しているため、色味などナチュラルに可読性を向上できます。背景やバナー全体の雰囲気を崩さない工夫として、活用しています。
（今回はコントラスト比を3にするために、2レイヤー分の文字下加工を作っています。）
終わりに
バナーを作る際には、「押したい！」と思ってもらえるような工夫が必ず必要になってきます。
まだまだスキルが足りない部分が大きいですが、まずはWCAGを理解するところから、制作に励みます。