目に優しいWebサイトの配色は白？黒？それとも…

ロービジョンの方や高齢な方等の中には、パソコンやスマホの画面が眩しく感じる方がいます。
主に画面の明度や背景色によるものですが、最近ではブルーライトが悪いと言われたり、OSやアプリのいわゆるダークモードの実装も増えて来てますね。

OS のハイコントラストテーマ

では、Webサイトの背景色も黒にして制作した方が良いかと言うと、そう上手くは行かない様です。

私もこのサイトを作るにあたり、黒ベースにしようか考えましたが、そもそもそういった悩みを抱えている人は、端末をハイコントラストテーマにして使っていたりします。

Windows のハイコントラストでは、強制的に背景色を黒に出来るので、Webサイト側で何色に指定していようと変わらない為、それはそれで良いのですが、問題はスマホ等の端末です。

iPhone では色を反転する機能が有りますが、単純に色を反転してしまう為、サイトを黒の背景色にしていると白に表示されてしまい逆効果になります。

iOS のアップデートで改善される事も有るかもしれませんが、アプリ開発者も頭を悩ませているのではないでしょうか。

アクセシビリティの観点から、背景色と文字色の配色は W3C の WCAG 2.0 というもので推奨のコントラスト比が定められているそうです。
規格については詳しくないので言及しませんが、推奨のコントラスト比を算出する計算式があり、私も数字と睨めっこしながら基準を超えた配色を適用してみました。

しかし、何という事でしょう。
端末で反転された途端、背景色と文字色が同化して非常に見にくくなったのです。

配色はユーザーの環境に依存するところが大きく、ユーザーの環境を邪魔しない事が一番のアクセシビリティになるのではないかと感じました。

自分が見せたいものを見せるのは難しいですね。
そして、人が見たいものを見せるという事はもっと難しいかもしれません。