>_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·1型2色覚(P型・赤が見分けにくい)

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
#828282
#2ecc71
#2ecc71
#ccbb6a
#baae77
#00c9b6
#b3b3b3
#3498db
#3498db
#799ade
#628ada
#00a8b0
#919191
#f1c40f
#f1c40f
#dcc100
#e7ce24
#ffb2a7
#c9c9c9

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 で見る
広告

この作業の手順ガイド


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

色の見え方には個人差があり、日本では男性の約5%、女性の約0.2%が、一般的な色覚とは異なる見え方をするといわれます(欧米の男性では約8%)。デザインやUIが色だけで情報を伝えている場合、こうしたユーザーには情報が伝わらない可能性があります。

色覚の種類と特徴

1型2色覚(P型、Protanopia)は赤を感じる錐体がはたらかず、赤と緑の区別が難しくなります。2型2色覚(D型、Deuteranopia)は緑を感じる錐体がはたらかず、同じく赤と緑の区別が難しくなります。この2つが最も多く見られます。3型2色覚(T型、Tritanopia)は青と黄の区別が難しくなります。1色覚(Achromatopsia)は色の区別がほぼできない状態で、まれです。なお以前は「色盲」という言葉が使われていましたが、現在は「1型2色覚」のような呼び方が使われます。Color Blindness Simulator は Machado らの研究(2009年)の変換行列で、各色覚での見え方を近似します。

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

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

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 Editor

グラデーションエディタ

カラーデザインCSS

使ってみる →

BOOTH

Box Shadow Generator

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

デザインCSS開発者向け

使ってみる →

BOOTH

このツールを共有する