色(v9.18.0)

ついにGoogleが、検索結果ページで暗い背景を試し始めたようなので、ふたたび真っ黒の背景色でダーク・モードを仕込んでおいた。切り替え機能は次のバージョンで再導入される。他に、色を1つ減らしたり、ページ・ヘッダーなどでも未読リンクが判別できるようにしたり、構文強調のカラー・スキームを脱Solarizedしたりした。色関係で変更が多い。

新しいコントラストのスコア化アルゴリズム(Advanced Perceptual Contrast Algorithm: APCA)がちらほら話題になっている。うまく機能しているように見えるし、今までのコントラスト比計算における問題点が改善されているように感じる。まずはこの新しいアルゴリズムの実装の解説(英語の解説と、LaTeXの数式、JavaScriptの実装で微妙に食い違いがあった)を読みながらコードに落とし、スタイル・ガイドの色彩などで、コントラスト・スコアを確認するために使い始めた。ついでに、2色のコントラスト・スコアを簡単にチェックできる、APCA Contrast Calculatorというページも作った。

APCAについてのメモ

SAPC(S-Luv Advanced Perceptual Contrast)がコントラストそのもので、APCAがそれを元に重み付けし、スコア化(以前はパーセンテージだった)するアルゴリズムのようだ。SAPCについてはあまり考えなくていいだろう。

  • LaTeX数式を元に、英語の解説や、JavaScriptライブラリーが作られている
  • 明度を計算する仕組みそのものはあまり変わっていない
  • 前景色と背景色を扱い分けるので、前景色と背景色を入れ替えるとコントラストが変わる
  • コントラストに対し重みづけをし、知覚的な印象に近づける
  • まだ色覚多様性は考慮されていない
  • 比率やパーセンテージではなく、スコア化する
  • |80|が7:1、|60|が4.5:1、|40|が3:1に相当するように結果はスコア化される

知覚的なコントラストのため、色覚多様性での差異が激しくなるのではないか、という疑問は解決しなかった。コントラストを算出するための色空間モデルのレベルで、元々考慮しているというようにも読めるため、あまり気にする必要はないかもしれない。素直にWCAG 2.1のコントラスト・アルゴリズムも併用するべきだろう。


他には、ハンバーガー・ボタンがなくなった。そのためマイナー番号が上がっている。ハンバーガー・ボタンは気に入ってはいたものの、やはりこのようなウェブサイトでわざわざボタンを押させるのはよくない。details要素での作り方はだいたいわかったので、またどこかで使いたい。