ダークモードの背景を無闇に黒くしてはいけない理由
ダークモードUIを設計する際、背景を無条件に純粋な黒に設定すると、テキストとのコントラストが過度に強くなり目の疲労を引き起こすことがあります。反対に背景が明るすぎると、テキストの読みやすさ基準(WCAG)を満たせません。このツールは使用するテキスト色と目標コントラスト比を基準に、ダークモード背景として使える最大の明るさを計算します。
計算の仕組み — WCAG相対輝度の公式
Webアクセシビリティ標準(WCAG 2.1)は、sRGB色を線形化した後、加重合計(R×0.2126 + G×0.7152 + B×0.0722)で相対輝度を計算し、両方の輝度値に0.05を加えて比率を求める公式を使用します。このツールはこの公式を逆算し、目標コントラスト比を満たす背景の最大輝度と、それに対応するグレーのHEXコードを導き出します。
活用のヒント
計算されたHEX値は純粋なグレー(R=G=B)なので、実際のデザインではこの明るさを基準にブランドカラーを少し混ぜた背景色を作っても構いません。ただし、最終的な背景色の明るさが計算値と同じかそれより暗い必要があります。
よくある質問
Q. WCAGコントラスト比とは何ですか?
A. Webアクセシビリティの国際標準(WCAG)が定めるテキストと背景間の明度コントラスト基準です。通常のテキストは4.5:1、大きいテキストは3:1、強化基準(AAA)は7:1以上を推奨します。
Q. 計算された背景色より明るくしても良いですか?
A. 計算値は許容される最大の明るさなので、それより明るい背景を使うとコントラストが基準より下がり、読みやすさが低下する可能性があります。計算値と同じか、それより暗い背景を使用してください。
Q. 純粋な黒(#000000)をダークモード背景に使ってはいけませんか?
A. 純粋な黒はコントラストは十分ですが、目の疲労を高める過度な明暗差になることがあり、実務では#121212のような濃いグレーがより推奨されます。