ダークモードとアクセシビリティ: 役立つ場合と実際に問題となる場合

ダーク モードは、ほぼすべてのサイトやアプリで標準となっています。ユーザーには好評で、OLED スクリーンのバッテリーの節約にもなり、時には「よりアクセスしやすい」とさえ見なされます。しかし、慎重に考えずに暗いカラー パレットに切り替えると、実際にはアクセシビリティが損なわれる可能性があります。この記事では、それを正しく行う方法について説明します。

ダークモードがアクセシビリティに役立つ場合

光過敏症 (羞明)、偏頭痛、またはデジタル眼精疲労のあるユーザーの場合、背景を暗くすると、特に暗い環境で長時間使用する際の不快感を大幅に軽減できます。ディスレクシアを持つ一部のユーザーは、暗い背景の方が快適に読書できると報告しています。

実際に痛いとき

一方、乱視 (一般的な視覚障害) を持つユーザーの場合、暗い背景に明るいテキストがあると、文字がぼやけて見える「ハレーション」効果が生じます。明るい背景に暗いテキストの方が、実際には読みやすい場合があります。結論としては、すべての人にとって唯一の正しい答えはありません。そのため、最良の解決策は、ユーザーに 1 つのモードを強制するのではなく、ユーザーに選択させることです。

ダーク モードのコントラストはライト モードとは異なります

よくある間違い: コントラスト比を再チェックせずに、明るいモードから同じテキストの色を取得し、単に背景を暗い色に反転することです。純粋な白の上に純粋な黒 (#000000) を使用すると、最大 21:1 のコントラストが得られます。ただし、その逆、純粋な黒の上に純粋な白は、目を疲れさせる特に強い「ハレーション」効果を生み出します。純粋な黒の代わりに濃い灰色の背景 (例: #121212) を使用し、純粋な白の代わりにオフホワイトのテキスト (例: #e8e8e8) を使用することをお勧めします。これでも WCAG のコントラスト要件を満たしています (詳細についてはガイドで説明しています)。色のコントラスト) ですが、見た目にはかなり楽です。

実践的な経験則

• 一度だけではなく、明暗の各モードでコントラストを個別に確認してください。
• 暗い背景上の特に飽和した色（明るい赤や青）は避けてください。それらは視覚的に「振動」し、読みにくくなる傾向があります。
• システム設定だけに依存するのではなく、サイトで手動で切り替えるようにしてください。
• 明るい背景用にデザインされた画像とロゴを確認してください。読みやすくするには、ダーク モード用の別のバージョンが必要な場合があります。