ダークモードでも崩れない色の選び方
白い紙でも真っ黒な OLED 画面でも読みやすい色トークンを選んだ経緯です。
最初のダークテーマは、ライトの配色を反転しただけでした。本文は問題ありませんでしたが、リンクは蛍光色になり、罫線は消え、コードブロックはまぶしく光りました。いま使っている三つのルールを紹介します。
色相より先にコントラスト
文字のトークンは背景に対して 4.5:1、罫線は 3:1 を確認します。明度を決めてから色相を選びます。
背景が暗いほど彩度を下げる
白地では落ち着いて見える青も、黒に近い背景ではちらついて見えます。ダークの配色は同じ色相のまま、彩度を約 20% 下げています。
実際のコンテンツで確かめる
表、コールアウト、シンタックスハイライトは、色見本では見えない問題を教えてくれます。変更する前にキッチンシンクを両方のテーマで開いてみてください。
文字より先に色が目に入るなら、強すぎます。
