色弱の見え方シミュレーター - 文字色と背景色

コンピュータの発達と普及により、プレゼン資料・ホームページなど、情報発信する機会が増加しました。このとき、文字色と背景色の組み合わせによって、文字が見づらくなってしまうことがあります。一般色覚の人には見分けやすくても、色弱の人には見分けにくい、という色の組み合わせもあるので、注意が必要です。

色弱の人には見分けやすいかどうかは、色弱の人に確認してもらうのが一番好ましいですが、すべてチェックしてもらうのは現実には難しいでしょう。

そこで、文字色と背景色の組み合わせから、色弱の人の見え方を模擬体験するシミュレータを作成しました。コントラスト比(明るさの差)も計算します。

使い方の画像はこちら(ポップアップ表示します)

文字色:      背景色:     

C: 人にやさしい色づかいをすすめる会

文字: #000000 ([赤,緑,青]=[[0,0,0]])
背景: #ffffff ([赤,緑,青]=[[255,255,255]])
コントラスト: 21.00

P: 人にやさしい色づかいをすすめる会

文字: #000000 ([赤,緑,青]=[[0,0,0]])
背景: #ffffff ([赤,緑,青]=[[255,255,255]])
コントラスト: 21.00

D: 人にやさしい色づかいをすすめる会

文字: #000000 ([赤,緑,青]=[[0,0,0]])
背景: #ffffff ([赤,緑,青]=[[255,255,255]])
コントラスト: 21.00

T: 人にやさしい色づかいをすすめる会

文字: #000000 ([赤,緑,青]=[[0,0,0]])
背景: #ffffff ([赤,緑,青]=[[255,255,255]])
コントラスト: 21.00

モノクロ: 人にやさしい色づかいをすすめる会

文字: #000000 ([赤,緑,青]=[[0,0,0]])
背景: #ffffff ([赤,緑,青]=[[255,255,255]])
コントラスト: 21.00

C型は一般色覚、P型、D型、T型は色弱です。詳しくは「色覚についての基礎知識」をごらんください。

見え方のシミュレーション

このシミュレータは、C型(一般色覚)の人向けに、色弱の人が見分けにくい色を模擬体験してもらうために、色を変換して提示しています。(色弱の人に見えている色を再現するものではありません。)

C型の見え方から、それぞれの色弱のタイプへの変換計算式は、A Physiologically-based Model for Simulation of Color Vision Deficiencyで公開されている数値を用いています。(Chromeブラウザの拡張アドオンSpectrumで、この計算式が採用されています。)

※色弱の人の中でも、色弱の程度は様々ですが、上のシミュレーションでは、色弱の度合いが最も強いケースをシミュレートしています。

コントラスト比

文字と背景の明るさの差を計算しています。計算式は、Web Content Accessibility Guidelines (WCAG) 2.0(ウェブアクセシビリティ基盤委員会)を用いています。コントラスト比は最小で1、最大で21です。

WCACでは、見やすいコントラスト比の基準を定めています。基準はレベルA(最低)、AA、AAA(最高)があります。AA以上の水準が好ましいです。

  • レベルAAA: 7:1以上 (大きな文字の場合は4.5:1以上)
  • レベルAA: 4.5:1以上 (大きな文字の場合は3:1以上)

大きな文字は、半角英数字の場合は18ポイント以上となっています。また日本語の全角文字の場合は、22ポイント、または太字18ポイント以上が同等とされています。

※P型、D型、T型の見え方をエミュレートした上でコントラスト比を算出しているため、P型、D型、T型のコントラスト比については実際よりずれる可能性があります。