Webサイトの文字色や背景色を自由に変更して、自分が読みやすい配色に変更できる拡張機能をご紹介します。
これらの拡張機能はWindowsの「ハイコントラスト」の機能に似ているもので、弱視や光線過敏症といった方のアクセシビリティを向上できるものです。
ブラウザ単位で変更ができ、ON,OFFの切り替えも簡単なので、閲覧中のサイトのコントラストが弱くて文字や画像が見にくい時に有効かと思います。
拡張機能は高性能なものと、シンプルなものの２つをご紹介します。
この記事の目次
サイトの文字色や背景色を変更する拡張機能
この記事では、サイトの文字色や背景色を自由な色に変更できるChrome（Edge）の拡張機能を２つご紹介します。紹介するのは以下の２つ。
- Midnight Lizard（Change Colorsの代替拡張機能）
- ページの色
「Midnight Lizard」は高性能なハイコントラストを備えた拡張機能で、テーマを選んで配色を一括変更できるほか、リンクやボタンの色といった部分も変更可能です。
今までは「Change Colors」というハイコントラスト用の拡張機能が有名でしたが、新しいストアの規制を満たしていないため2023年をもってストアから削除される予定のようです。その後継が「Midnight Lizard」という感じです。
一方で「ページの色」はシンプルで、文字色と背景色のみを変更する拡張機能です。
これらの拡張機能を使うことで、サイトの配色を変更してハイコントラスト化することができるので、使い方次第でサイトの可読性を向上させることが出来ます。
では早速みていきましょう・ｗ・
拡張機能その１．Midnight Lizard
「Midnight Lizard」にはあらかじめ複数のテーマ（配色パターン）が用意されているので、これを選ぶだけでサイトの色を一括でいい感じに変更することが出来ます。
文字色や背景色の他にも、リンク色やボタンの色まで個別に変更することができるので、いつも見るサイトを自分好みの配色に変更することが可能です。
また「Midnight Lizard」はサイト内の画像や広告の色反転にも対応しているようで、場合によっては画像などのコンテンツの可読性も上がるはずです。
補足
Chromeの拡張機能として紹介していますが、こちらはEdgeでも使用可能です。
それでは「Midnight Lizard」インストール方法と使い方を見ていきます。
拡張機能のインストール
Chromeで以下のURLにアクセスします。
アクセスしたら「Chromeに追加」を押します。
追加許可の確認テロップが出たら「拡張機能を追加」をクリック。
これで準備完了です。
なおEdgeの場合は以下のリンクから「Midnight Lizard」をインストールできます。
Midnight Lizardの使い方
Midnight Lizardの使い方です。
Midnight Lizardは他の拡張機能同様、Chromeの拡張機能一覧からを起動することができるので、パズルマークをクリックして一覧から起動しましょう。
この手の拡張機能は実際に使ってもらった方が分かりやすいと思いますが、簡単には画面右上でON,OFFを切り替え。
「Current color scheme」で用意されたテーマ（配色パターン）を選ぶことができ、Applyボタンを押すと設定が反映されるという感じです。
「Midnight Lizard」でサイトの色を変更する様子（GIF）
一連の操作感をGIFにしてみるとこんな感じです。
左側にあるメニューを使えばリンクやボタンの色といった細かい部分のコントラストを個別に変更することができ、自作したテーマを保存しておくことも出来ます。
サクッと「Midnight Lizard」を使ってみた感じでは、デフォルトのテーマでも十分見やすく感じました。ただ、高機能ゆえに使いこなすには慣れが必要だと思いました。
拡張機能その２．ページの色
シンプルにサイトの「文字色」と「背景色」だけを変更したいなら「ページの色」という拡張機能がお勧めです。
先ほど紹介した「Midnight Lizard」は高性能すぎて文字色と背景色のみを変更するのが意外と難しかったのですが、この拡張機能はシンプルで色を指定するだけです。
補足
Edgeでは見つからなかったので、こちらはChrome専用の拡張機能です。
それでは「ページの色」のインストールから見ていきましょう。
拡張機能のインストール
Chromeで以下のURLにアクセスします。
アクセスしたら「Chromeに追加」をクリック。
補足
執筆時は「拡張機能を追加」を押した時点で新しいタブが２つ開きました。
悪意はないものですが、Youtubeが開くと音が出るので注意しましょう。
追加できれば準備完了。起動方法は先ほど紹介した通りなので割愛します。
ページの色の使い方
先述したように「ページの色」の使い方は至ってシンプルです。
拡張機能のON,OFFの切り替えは見ての通り。
「A」のところが文字色（フォントカラー）の設定。
「■」のところが背景色（バックグラウンドカラー）の設定です。
こちらも一応使用感をGIFにしてみました。
「ページの色」でサイトの色を変更する様子（GIF）
こんな感じです。
ちなみに文字色を真っ黒の「#000000」に、背景色を真っ白の「#ffffff」とすることで、コントラスト比が最大になりました。（動作確認）
あとがき：読みやすいフォントカラーとは...
Webサイトの配色は様々ですが、実は文字色（フォントカラー）に真っ黒（#000）を使っているサイトは少なく、大手サイトでもグレーの文字色が使われています。
白背景に真っ黒な文字よりも、コントラスト比を少し落としたグレー文字の方が目に優しく、読みやすいだろうという理由からです。
かく言う当サイトも文字色はグレー（#333）を使っているのですが、以前執筆した「フォントカラーはグレーがお勧め！」という記事でコメントをいただきました。
コメントを抜粋したものが以下です。
業界の「グレー文字が読みやすい」が本当に正しいのか検証していただけることを願っています。私のようなロービジョン（視覚障害者）の人にとっては、白地にははっきりとした黒の文字で記載してくださるとありがたいのです。
好みなのでしょうけど、私はグレーだとボーっとしているように感じ、真っ黒のほうが読みやすく思います。
なるほど...人によってはグレー文字ではコントラストが弱く、読みづらいと感じる方もいるようです。こんな経緯もあって今回この記事を執筆してみました。
まとめ
以上、Webサイトの文字色や背景色といった配色を自分好みに変更できる拡張機能のご紹介でした。
色々調べたのですが、高性能を求めるなら「Midnight Lizard」が良さそうです。
シンプルに文字色と背景色のみを変更したいなら「ページの色」がお勧めです。
拡張機能は併用可能
これらのハイコントラスト拡張機能は併用可能でしたので、組み合わせて使うことでさらに柔軟にサイトの色変更が出来ると思います。
ひとこと
当サイトにフォントサイズやフォントカラーを一括で変更できるタブのような機能を実装しようと前々から考えていたのですが、需要を考えるとう～ん...という感じ。
つくづく万人受けするサイト設計は難しいと思いました。
