devtools-hub

Color Blindness Simulator

HEXカラーを5種の色覚特性でシミュレーション・WCAG判定

カラーアクセシビリティデザイン

赤・緑・青・黄などのカラーを最大8色登録し、正常色覚 / Protanopia / Deuteranopia / Tritanopia / Achromatopsia の5種で同時シミュレーション。Brettel/Vienot の変換行列を使った数学的変換で正確に再現。白背景・黒背景に対する WCAG AA/AAA コントラスト比も表示します。

広告

Color Blindness Simulator

4 colors·Protanopia·第一色盲(赤が見えにくい)

Colors (4/8)

#e74c3c
#2ecc71
#3498db
#f1c40f

Vision Type

Export (Protanopia)

#e74c3c#786d39
#2ecc71#ccbb6a
#3498db#799ade
#f1c40f#dcc100

Color Simulation

ColorNormalProtanopiaDeuteranopiaTritanopiaAchromatopsia
#e74c3c
#e74c3c
#786d39
#9f8f36
#fe1b49
#929292
#2ecc71
#2ecc71
#ccbb6a
#baae77
#00c9b6
#a6a6a6
#3498db
#3498db
#799ade
#628ada
#00a8b0
#8f8f8f
#f1c40f
#f1c40f
#dcc100
#e7ce24
#ffb2a7
#cacaca

WCAG Contrast

Colorvs Whitevs BlackSim (Protanopia) vs WhiteSim vs Black
#e74c3c
3.82:1
AAAAA
5.5:1
AAAAA
5.19:1
AAAAA
4.05:1
AAAAA
#2ecc71
2.1:1
AAAAA
9.99:1
AAAAA
1.93:1
AAAAA
10.88:1
AAAAA
#3498db
3.15:1
AAAAA
6.66:1
AAAAA
2.8:1
AAAAA
7.49:1
AAAAA
#f1c40f
1.66:1
AAAAA
12.64:1
AAAAA
1.8:1
AAAAA
11.67:1
AAAAA

Features

  • HEX入力 + カラーピッカーでカラーを最大8色登録
  • 正常 / Protanopia / Deuteranopia / Tritanopia / Achromatopsia の5種変換
  • Brettel/Vienot 変換行列による数学的シミュレーション(単純CSSフィルター不使用)
  • 各カラー × 5種のスウォッチをグリッド表示、即時更新
  • WCAG AA/AAA コントラスト比判定(白・黒背景 × 元色・変換後色)
  • 選択した色覚タイプの変換後HEXを一覧コピー

Desktop App

デスクトップ版を入手する

Windows 向けアプリ版はすべての機能をフルで使えます。BOOTH で配布中。

BOOTH で見る
広告

色覚シミュレーションとアクセシビリティ — 色だけに頼らないデザインの実践

色覚多様性(色盲・色弱)は世界の男性の約8%、女性の約0.5%に見られます。デザインやUIが色だけで情報を伝えている場合、色覚多様性のあるユーザーにとって情報が失われる可能性があります。

色覚の種類と特徴

第1色盲(Protanopia)は赤の錐体が機能せず赤と緑の区別が難しくなります。第2色盲(Deuteranopia)は緑の錐体が機能せず同じく赤緑の判別が困難です。この2種類が最も多く見られます。第3色盲(Tritanopia)は青と黄の区別が難しくなります。全色盲(Achromatopsia)は色の区別がほぼできない状態で稀です。Color Blindness Simulatorで各色覚の見え方をBrettel行列で正確にシミュレートできます。

カラーユニバーサルデザインの原則

カラーユニバーサルデザインの基本は「色だけで情報を伝えない」ことです。グラフの折れ線は色の違いに加えて線の形状(実線・破線・点線)でも区別する、フォームのエラーは赤色テキストだけでなくアイコンや文章でも伝える、ステータスは色だけでなくテキストラベルも表示するといった工夫が有効です。

WCAGとコントラスト比

WCAG(Web Content Accessibility Guidelines)ではコントラスト比の基準を設けています。通常テキストはAA水準で4.5:1以上が必要です。Color Blindness Simulatorでシミュレーション後にコントラスト比を確認することで、色覚多様性を持つユーザーにとっても十分な視認性があるかを検証できます。

デザイン検証のワークフロー

デザイン完成後にColor Blindness Simulatorで2色のHEXを入力し、5種類の色覚でどう見えるかを確認します。特に重要なのはエラー・成功・警告を表すカラー、グラフのデータシリーズのカラー、CTAボタンのカラーです。シミュレーション結果に問題があれば、色の明度差を大きくするか、アイコンやパターンを追加して情報を補完します。

Related Tools

color-deck

カラーコード変換 & パレット保存

カラーデザイン開発者向け

使ってみる →

BOOTH

Gradient Deck

グラデーションエディタ

カラーデザインCSS

使ってみる →

BOOTH

Box Shadow Generator

CSS box-shadow をスライダーで即作成。複数レイヤー対応

デザインCSS開発者向け

使ってみる →

BOOTH

このツールを共有する