色覚異常を再現するSVGフィルター

同じ画像をいくつかの色覚異常をエミュレートするSVGフィルターを通して加工したサンプル

多くのウェブ制作者達が色覚異常について考えることはまずない。せいぜいコントラストを確保したり、リンクの下線を消さないようにしたりすることで、グレースケールでもそれなりに識別できるように注意するくらいだろう。それで十分とも言えそうではあるが、それ以上考えようにも取っ掛かりがないためそれで止まっているとも言える。その取っ掛かりとして色覚異常を再現するSVGのフィルターを作った。

Download: Color Blindness Emulation

filters.svgに含まれる8つのフィルターは、そのアルゴリズムはともかく、feColorMatrix要素を使ったごく簡単なものだ。

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <defs>
    <filter id="protanopia">
      <feColorMatrix
        in="SourceGraphic"
        type="matrix"
        values="0.567, 0.433, 0,     0, 0
                0.558, 0.442, 0,     0, 0
                0,     0.242, 0.758, 0, 0
                0,     0,     0,     1, 0"/>
    </filter>
  </defs>
</svg>

このような行列によってProtanopia(1型2色覚/赤色盲)はエミュレートすることができる。

利用はFirefox 35以降やChrome 18以降、Safari 6以降ならばCSS経由で行える。filterプロパティー(Internet Explorerで実装されている独自のfilterプロパティーとは違うもの)でurl()を使ってSVGファイルを参照すれば良い。

View Demo: Color Blindness Emulator with Filter Effects via CSS

デモではPlaceIMGの画像をそれぞれフィルターをかけて色覚異常の状態をエミュレーションしている。画像によっては違いがわかりづらいが、色覚異常のタイプと画像によって大きく結果が異なるということがわかるということでもあるだろう。再読み込みすれば様々な画像で確認できるので試してみると良い。Chromeではフィルターを適用する処理がかなり重いようで、CPUを占領してしまうことには留意して欲しい。

.protanopia {
  filter: url('622.svg#protanopia');
}

filterプロパティーではblur()などの組み込み関数を使う以外にも、このようにSVGのfilter要素として定義したフィルターをurl()を使って参照することができる。具体的には予めSVGのfilter要素にIDを振っておき、URL識別子で参照することになる。他にも参照する方法はあるが、少しややこしく挙動も微妙なためここでは触れない。


最終的にはこれを使って任意のウェブページを色覚異常をエミュレートした形で確認するツールを作りたい。そういったツールを使って常に確認するべきだとは思わないが、そういったツールを一度体験するだけでも色覚異常者が見ている世界について少しだけ知識を得ることができるはずだ。

視覚障害者と違い、メディア・タイプで判別できない世界であることもまた難しい点だ。視覚障害者へはそれなりにまともにマークアップして、CSSをうまく切り分けてやるだけでベースラインは確保できそうだが、色覚異常者へはそういうアプローチでは届くことはない。カラー・スキームの制作にもう一つ考慮すべきことが加わることは間違いない。

例えばこのウェブサイトではブルーがメイン・カラーとなっているが、仮にこれに加えて所々でイエローを使っていたりすると、Tritanopia(3型2色覚/青色盲)の人にはブルーはグレーに、イエローはピンク(に近い色)に見えるため、ピンクに見える部分がメイン・カラー、すなわちリンク等に誤解されてしまうかもしれない。

これはもちろん極端な例だが、そういったことがわかるかもしれないツールがあることは、取っ掛かりとしては悪くはないはずだ。