白黒背景＆高低コントラスト

もうかなり前に感じられる２０２１年１１月、年に数回突発的に起こる「このサイトのＣＳＳを弄りたい」という衝動に駆られてしまった。いつか作成しよう⋯⋯と考えていたダーク・モードまたはダーク・テーマと呼ばれる暗い背景色を用いた配色（黒背景）を設定したみた。以前からＣＳＳのメディア・クエリーの prefers-color-scheme で設定できることは知っていたのだが、背景と文字の色を反転するだけでは済まず、時間がかかるだろうと面倒臭がって後回しにしていた。そしてどうせ作るのなら Chrome が version 96 から prefers-contrast に対応するようになったので、高コントラスト・低コントラストも設定しようと思い立った。ただ無駄に仕事を増やしただけとも言えようか。つまりデフォルトの白を背景色とする「ライト」の通常コントラストに高コントラストと低コントラストを設け、黒を背景色とする「ダーク」の通常コントラストに高コントラストと低コントラストを設定して、ページの配色は６通りになった。

デフォルトの白背景のコントラストは高め。これはアクセシビリティーの観点からコントラストを WCAG (Web Content Accessibility Guidelines) Level AAA に準ずるようにしたため。個人的にはもう少し低コントラストが好みなので、この機会に自分な好きな配色を作ってみた。このサイトのロゴ画像は白背景通常コントラスト＆高コントラスト・黒背景通常コントラスト＆高コントラスト・白黒背景低コントラスト用の３種類ある。そのためどのロゴ画像が使われたかで、閲覧者の設定がある程度分かるようになっている。ダーク・モードまはたダーク・テーマを使う人はかなり少なくせいぜい数％と予想していたのだが、ここ最近のログを調べると約１２％で黒背景通常コントラスト＆高コントラスト用ロゴ画像が使われている。結構多いので、作成した意義というか甲斐があった。

スマートフォンのブラウザーだとダーク・テーマを設定で選ぶことが比較的簡単。使っている Android スマートフォンにいくつかのブラウザーをインストールして、半数をダーク・テーマにしている。どちらが読みやすいということもない。白背景でもブルーライト・カットのアプリケーションを使っているし、コントラストも低めに設定してあるためだろう。コンピューターのブラウザーだと現在のところデベロッパー・ツールのエミュレーターを利用している。

Chrome では下記のように白黒背景と高低コントラストを選べる。

Firefox だと太陽で白背景・月で黒背景が選べる。

ＣＳＳを変更するとき、６通りの設定でテストを怠らないことを忘れないようにしなければ⋯⋯。