BlueprintLab Guide
同じ#315ee8でも、読みやすいとは限らない。色コードとコントラストは別の話です
HEXをRGBに変えても、色は良くも悪くもなりません。ところが背景色を変えると、読みやすさは一気に変わります。似ているようで別の話です。
HEX・RGB・HSLは「同じ色をどう書くか」です
#315ee8、rgb(49, 94, 232)、対応するHSL。表記は違っても、変換が正しければ同じ色を指せます。
HEXはWebで短く書きやすい。RGBは各チャンネル値が見やすい。HSLは色相・彩度・明度を人間が調整しやすい。使い分けはありますが、形式を変えただけで読みやすい色になるわけではありません。
読みやすさは「その色」ではなく「2色の組み合わせ」で決まります
文字色だけ見て「濃いから大丈夫」とは判断できません。白背景では読めても、少し暗い背景へ載せた途端に境界がぼやけることがあります。
WCAGのコントラスト比が見ているのは前景色と背景色の組み合わせです。ブランドカラーを文字に使いたいときほど、実際の背景とセットで測るのが近道です。
透明色が入ると、見えている色は元のコードと違います
RGBAや8桁HEXで透明度を使うと、画面に見えている色は背景と合成された結果です。元のRGB値だけでコントラストを計算すると、実画面とずれることがあります。
半透明の文字やオーバーレイを使っているなら、最終的に表示される背景まで含めて確認します。ここはデザインツール上では気づきにくいポイントです。
色を決めたら、最後は実画面を見る
エラーを赤、成功を緑だけで伝えると、色を区別しにくい人には状態が伝わらないことがあります。アイコン、ラベル、線、形などを併用すると情報として強くなります。
色形式を変換する → 前景と背景のコントラストを測る → 実際の文字サイズやUI状態で見る。この順に確認すると、色コードの話と読みやすさの話を混ぜずに済みます。