色覚シミュレーションブラウザ

Version 1.2.2.6

はじめに

Web上で色覚シミュレーションが必要である方は色覚シミュレーションChrome拡張機能というこれ以上ないツールを既に導入しているでしょうが、 いつも使用している環境でない(借り物PCでChrome拡張機能をインストールできないなど)ときや、色覚シミュレーションChrome拡張機能を導入していない方に色覚シミュレーションの結果を見てもらいたいときなど、 第二の選択肢としてインストール不要で使用できる 色覚シミュレーションブラウザを使っていただければ、と思います。

使用方法

上部のテキストボックスに色覚シミュレーションしたいURLを入力して、移動ボタンをクリック(Enterキーでも可)してください。選択された色覚タイプでページが表示されます。表示されたページは通常通りの操作ができますので、色覚シミュレーションを適用したままの状態でブラウジングできます。ただし、ページ遷移で別ウィンドウ(タブ)に移動する場合や、ページ全体が遷移されたとき(色覚シミュレーションページはインラインフレームで表示されているため)は、色覚シミュレーションが解除されます。その場合はお手数ですがそのページのURLをもう一度上部のテキストボックスに入力して移動してください。

インラインフレーム機能を使用しているため接続側が許可していないとページ自体が表示されません。例えばgoogle系のサイトは拒否されます。そのようなサイトは色覚シミュレーションすることはできません。また、httpのページを色覚シミュレーションしたい場合は、このページをhttpでアクセス (http://nazo.main.jp/prog/js/cvsbrws.htmlを直接ブラウザのアドレス欄に入力)してください。

色覚タイプはリストから選択することでいつでも変更可能です。

homeボタンでこのページが表示されます。

shareボタンでシミュレーション結果をシェア(共有)できます。次節で説明します。

色覚シミュレーションされたページは見た目上の変更であり、ページ中の画像をブラウザの操作で保存しても色覚シミュレーションされた画像にはなりません。色覚シミュレーションされた画像が必要な場合は、自作Webアプリの色覚シミュレーション画像変換を使用してください。

動画視聴

YouTubeのサイト自体は上記の理由により接続を拒否しているため表示はできません。しかしそれではとても不便だと感じましたので、埋め込み動画が接続を拒否されないことを利用して、 YouTubeの動画URLを埋め込み動画URLに変換する仕組みを入れてあります。そのため動画URLをそのままテキストボックスに(コピペ等で)入力すれば、色覚シミュレーションされた状態の動画を視聴できるようになっています。ショート動画も対応しています。

同様にニコニコ動画の動画URLも埋め込み動画URLに変換する仕組みを入れてありますので、 動画URLをそのままテキストボックスに入力することで、色覚シミュレーションされた状態の動画を視聴できます。

SNS

Twitter(現X)も接続を拒否しているため表示できませんが、埋め込みポストは接続を拒否されないため、動画サイトと同様にポストURLを埋め込みポストURLに変換する仕組みを入れてあります。ポスト単体のURLをテキストボックスに入力してください。色覚シミュレーションされた状態のポストを見ることができます。 URLはポストの共有ボタンから取得できます。

シェア機能

シェア機能を使用すると共有用のURLが作成され、共有URLにアクセスするだけで色覚シミュレーション結果を見ることができます。また、色覚シミュレーションの結果を見せたい相手に共有URLを送るだけで色覚シミュレーション結果を見せることができます。

使用方法は、色覚シミュレーション結果が表示されている状態でshareボタンをクリックすると、共有用のURLが表示されます。このURLをブックマークに登録したり、共有したい相手に送ってください。

注意!!!

共有URLには色覚シミュレーションするURLがパラメーターとして含まれています。このURLが外部に知られてはいけない場合は、シェア機能は使用しないでください。共有URLはパラメーターも含め平文で(このWebアプリの)サーバーに送られるため、中継サーバーも含め、パラメーターに含まれているURLが外部に知られることになります。上部のテキストボックスにURLを入力して色覚シミュレーションする場合は、通常のブラウザにURL入力する場合と同じ動作になります。

サンプルページ

更新履歴

バージョン	更新日付	内容
1.2.2.6	2025/11/14	レイアウト調整内部処理を共通処理に変更
1.2.1.5	2025/10/16	シェア用URLでアクセスするとアドレスバーのURLが埋め込み用URLになるのを修正
1.2.0.4	2025/10/13	Twitter(現X)の(埋め込み)ポストが見られるようにURL変更処理追加サンプルページに動画、ポストを追加
1.1.1.3	2025/08/06	レイアウト調整
1.1.0.2	2025/04/07	ニコニコ動画の(埋め込み)動画が見られるようにURL変更処理追加
1.0.1.1	2025/03/07	サンプルページ追加
1.0.0.0	2025/02/24	色覚シミュレーションブラウザの公開

P型、D型、T型色覚シミュレーションのカラーフィルター値は、色弱シミュレーションのサンプル画像を作ってみるの値を使用させていただきました。
SVGフィルターの記法は、 Simulating color vision deficiencies in the Blink Renderer を参考にさせていただきました。
色覚シミュレーションした画像が欲しい場合は、自作Webアプリの色覚シミュレーション画像変換をお試しください。
Windowsデスクトップの内容を色覚シミュレーションしたい場合は、自作アプリのCrossPoint.NETのルーペ機能をお試しください。アプリの詳しい機能の説明はヘルプを読んでください。
Google Fontsで提供されているMaterial SymbolsをWebフォントとして使用しています。
Windows11 Home + Google Chromeで動作検証しています。それ以外の環境、ブラウザでは動作しない可能性があります。ご了承ください。

色覚シミュレーションブラウザ

Version 1.2.2.6

はじめに

使用方法

動画視聴

SNS

シェア機能

注意!!!

サンプルページ

Webサイト

ウェブカラー見本一覧(Protanope)

ウェブカラー見本一覧(Deuteranope)

ウェブカラー見本一覧(Trianope)

ウェブカラー見本一覧(Monochrome)

YouTube

ペンパイナッポーアッポーペン(Protanope)

ペンパイナッポーアッポーペン(Deuteranope)

ペンパイナッポーアッポーペン(Trianope)

ペンパイナッポーアッポーペン(Monochrome)

ニコニコ動画

新・豪血寺一族 -煩悩解放 - レッツゴー！陰陽師(Protanope)

新・豪血寺一族 -煩悩解放 - レッツゴー！陰陽師(Deuteranope)

新・豪血寺一族 -煩悩解放 - レッツゴー！陰陽師(Trianope)

新・豪血寺一族 -煩悩解放 - レッツゴー！陰陽師(Monochrome)

Twitter(現X)

ロッテ世界の名車ミルクチョコレートフェラーリ512BB(Protanope)

ロッテ世界の名車ミルクチョコレートフェラーリ512BB(Deuteranope)

ロッテ世界の名車ミルクチョコレートフェラーリ512BB(Trianope)

ロッテ世界の名車ミルクチョコレートフェラーリ512BB(Monochrome)

更新履歴