背景色と4.5、文字色と3

ハイパーリンクの色と文字色とのコントラスト比を上げようと、四苦八苦していた。最終的には文字色を少し暗くして、未訪問と訪問済みのどちらも、背景色と4.5以上、文字色と3以上確保するようにできた。最終的にはあまり変わっていないが、未訪問が若干明るく、訪問済みが青がかったグレーになった。

隣接する文字とのコントラスト比を3以上確保する、というのはTechniques for WCAG 2.1のG183で言及されている。このテクニックは下線がなく色だけの場合(「hypertext links that are identified only by a difference in color with surrounding text」)なので、ハイパーリンクに下線があるこのウェブサイトには関係ない。完全な白の背景と完全な黒の文字ではない場合に、この2つのコントラスト比を両立できるのかという興味だけがあった。

不可能ではないけれど、背景色と文字色の色相に依存するし、色コードを見て「これくらい明るさが違えば」などでざっくりと判断することはできない。例えば、このウェブサイトの背景色と文字色を元に両立できるウェブ・セーフ・カラーを探すくらいでも、全216色からたった11色しか見つからない。また、文字色の明るさが2%上がるだけで、青系は全滅するし、5%上がると、1色も見つからなくなる。

ある色を2色以上とコントラストを比較するツールがない(見つからない)。そういうことができるようにスタイル・ガイドを書き直すところから始めたりしてた。ダーク・モードの実装などを考えると、数色と比較できるツールがあると助かりそう。

でも色を数色ぽちぽちと入力するのはかったるそうなので、上記の実験のようにウェブ・セーフ・カラーであたりを付けるのは悪くなかったかもしれない。1677万色を探査して、結果を確認するともちろん死ぬ。色相を60度くらいの範囲に絞って、彩度と明度を10%刻みで探査すると、イメージする色合いの色が見つけやすいかもしれない。

このあたりの見つけにくさは、いわゆる「知覚的に均等」なLab色空間の特に先ごろ話題になったLCH色空間を使う色の記法で、判断の点でも記述の点でも解決する。ようになる。と思う。はず。実装が。実機が。

:root {
  --color-foreground: hsl(45, 20%, 10%);
  --color-hyperlink: hsl(225, 80%, 54%);
  --color-visited-hyperlink: color-mix(
    var(--color-hyperlink)
    var(--color-foreground)
    chroma(50%)
  );
}

いずれは、このように書くと--color-hyperlinkの色相と明度を維持したまま、知覚的な彩度(chroma)の中間値を取れるようになる。第一引数が基準になるので、順番は重要。こうなるともうColor Level 4ですらなく、Level 5の話だけど。