色覚・視覚シミュレーター
ページのアドレスを入力すると、8種類の見え方でそのページを見られます。フィルターなしのページも横に並びます。色だけに頼ったリンク、警告、グラフがすぐに見つかります。
3つのセンサーと、1つが欠けたときに起きること
網膜は3種類の錐体細胞で色を測っています。それぞれ光の別々の帯域にいちばん敏感です：長い波長（赤）、中くらい（緑）、短い（青）。脳は3つの信号を比べて色を割り出します。1種類がないかずれていると、その比較の一部ができなくなり、その軸に沿ってだけ違う色どうしが同じに見えるようになります。
赤と緑の錐体の遺伝子はX染色体にあります。そのため、何らかの赤緑の色覚異常を持つのは男性の約12人に1人で、女性ではおよそ200人に1人です。そのほとんどは錐体が欠けているのではなく、働きが弱まっているだけです。その見え方は、一般的な色覚と、ここで示す完全なシミュレーションの中間のどこかにあります。
8つの見え方
| 見え方 | 再現しているもの | 崩れやすいもの |
|---|---|---|
| 一般的な色覚 | 基準。フィルターなしで表示 | |
| 2型色覚（D型） | 緑の錐体が働かない。軽い型を含めると男性の約6% | 赤と緑の状態表示の色、緑の隣のオレンジ |
| 1型色覚（P型） | 赤の錐体が働かない。軽い型を含めると男性の約2% | 暗い背景の上の赤い文字（ほぼ黒になる） |
| 3型色覚（T型） | 青の錐体が働かない。1万人に1人未満 | 青と緑、黄色とピンク |
| 1色覚（全色盲） | 明るさだけ。モノクロの電子書籍リーダーや白黒印刷のページも同じ | 色相で伝えているあらゆる意味 |
| ロービジョン | 視力の低下。眼鏡なしで読むような状態 | 小さな文字、細いフォント、ラベルのないアイコン |
| 白内障 | 水晶体の濁りと黄ばみ。60歳を過ぎるとよく見られる | 薄いグレーの文字、水色のリンク |
| 日なたの画面 | 真昼の屋外で見るスマートフォン | コントラストが控えめなものすべて |
3つの色覚のシミュレーションは、Machado、Oliveira、Fernandesが2009年に発表した変換行列を、最大の重さで使っています。明るさが正確に保たれるよう、リニアRGBで適用します。ほかの見え方はCSSのフィルターで作っています：1色覚はグレースケール、ロービジョンは2.5ピクセルのぼかし、白内障はぼかしにセピアの色合いと低いコントラスト、日光はコントラストを大きく下げて明るさを上げたものです。
5分でできる確認
- 2型色覚で、リンクを見る。段落の中のリンクを探してください。周りの文字と区別がつかなくなったら、下線を付けます。
- 2型色覚で、状態表示を見る。フォームのエラー、在庫の表示、「オンライン」の点、グラフの凡例を見てください。赤いメッセージと緑のメッセージは、アイコンや言葉でも区別できるべきです。
- 1色覚。主要なボタンが副次的なボタンより目立ったままかを確認します。両方が同じグレーになるなら、2つの違いは色相だけだったということです。
- ロービジョン。見出し、ナビゲーション、主な操作を、形と位置から見つけられるはずです。
- 日なた、スマホ幅で。ここで消える文字こそ、最初に濃くすべき文字です。コントラスト比計算で測ってください。
WCAGは、これらすべての元にあるルールを達成基準1.4.1で定めています：色を、情報を伝える唯一の視覚的手段にしてはならない。
プレビューの作り方と、その限界
当サーバーはHTMLをダウンロードし（2.5 MBまで）、スクリプト、フレーム、イベントハンドラーをすべて取り除いて、結果をブラウザに送ります。ブラウザはそれをサンドボックス化したフレームで表示します。フレームはコードを実行できず、フォームも送信できません。画像、フォント、スタイルシートは、あなたのブラウザが元のサイトから直接取得します。
これには2つの副作用があります。カルーセル、遅延読み込みのセクション、シングルページアプリケーション全体のように、サイトがJavaScriptで組み立てる内容は、なかったり未完成に見えたりすることがあります。また、Webフォントの中には自分のドメインの外では読み込まれないものがあるので、書体が実際のページと違うことがあります。
シミュレーションは近似で、あなた自身の画面に、あなた自身の目に向けて表示されるものです。デザインが色に頼っているところを見つけるのは得意です。特定の人が何を知覚しているかはわかりません。色覚に特性のある人やロービジョンの人からの意見は、どんなフィルターよりも価値があります。
よくある質問
いちばん多い色覚のタイプは何ですか？
2型3色覚（D型の色弱）で、緑の錐体の反応が弱まったものです。完全な型である2型2色覚と合わせると、男性の約6%にあたります。そのため、このツールは2型色覚の表示から始まります。
色覚に特性のある人は白黒で見ているのですか？
ほとんどの場合、そうではありません。色覚がまったくない状態（1色覚）は、およそ3万人に1人です。色覚に特性のある人のほとんどはたくさんの色を見ていて、特定の組み合わせ、たいていは赤緑の軸に沿った色を取り違えます。
一緒に使っても安全な色はどれですか？
明るさがはっきり違う組み合わせは、どのフィルターでも区別できます。たとえば濃い青と黄色やオレンジです。2つの色が別々の意味を持つときに避けるべき組み合わせは、赤と緑、緑と茶色、青と紫です。
プレビューでページが崩れて見えるのはなぜですか？
プレビューはJavaScriptなしで動きます。レイアウト、メニュー、内容がスクリプトに頼っていると、その部分は表示されません。それでも、表示されたものにはフィルターが正しくかかっています。
ログインが必要なページもテストできますか？
いいえ。当サーバーは匿名の訪問者としてページを要求し、あなたのセッションにはアクセスできないので、得られるのはログイン画面だけです。ログインの先にあるページには、ChromeやFirefoxの開発者ツールに組み込まれた色覚エミュレーション機能を使ってください。