その配色、すべての人に届いていますか？色覚多様性（1型・2型・3型・全色盲）での見え方をリアルタイムに再現し、 グラフの混同しやすい色の検出、画像の一括変換、WCAGのコントラスト比判定までまとめて行えます。
通常テキスト AA
合格
基準 4.5:1
通常テキスト AAA
不合格
基準 7:1
大きな文字 AA
合格
基準 3:1
大きな文字 AAA
合格
基準 4.5:1
UI部品・図形
合格
基準 3:1
色覚特性ごとに「何色に見えるか」
| 色覚タイプ | 文字色の見え方 | 背景色の見え方 | コントラスト比 | 色の差（ΔE） |
|---|---|---|---|---|
| 一般型（C型） | #FFFFFF | #2563EB | 5.17:1 | 96.5 |
| 1型色覚（P型） | #FFFFFF | #4040CA | 7.49:1 | 105.3 |
| 2型色覚（D型） | #FFFFFF | #3C38C2 | 8.28:1 | 107.4 |
| 3型色覚（T型） | #FFFFFF | #28B0AA | 2.66:1 | 50.4 |
| 全色盲（A型） | #FFFFFF | #606060 | 6.29:1 | 59.3 |
ΔE（色差）は2色がどれだけ離れて見えるかの指標です。おおよそ12を下回ると、その色覚特性では2色の区別がつきにくくなります。
UIコンポーネントの見え方
一般型（C型）
すべての色を識別できる一般的な見え方です。
日本人の約95%
見やすさの確認
読みやすさとコントラストを検証。
Design Text
1型色覚（P型）
赤を感じにくく、赤が暗く沈んで緑や茶色と混同しやすくなります。
日本人男性の約1.5%
見やすさの確認
読みやすさとコントラストを検証。
Design Text
2型色覚（D型）
緑を感じにくく、赤と緑の区別が難しくなります。最も頻度が高い型です。
日本人男性の約3.5%
見やすさの確認
読みやすさとコントラストを検証。
Design Text
3型色覚（T型）
青を感じにくく、青と緑、黄とピンクの区別が難しくなります。
非常にまれ
見やすさの確認
読みやすさとコントラストを検証。
Design Text
全色盲（A型）
色相をほぼ感じず、明暗（輝度差）だけで対象を捉えます。
極めてまれ
見やすさの確認
読みやすさとコントラストを検証。
Design Text
色のバリアフリー化のヒント
1型（P型）や2型（D型）では赤と緑の区別が難しくなる傾向があります。重要な通知には色だけでなく、アイコンや文字での補足を必ずセットで行うことが、日本におけるアクセシビリティ標準（JIS X 8341-3）への近道です。
色覚シミュレーターとは？色弱・色覚多様性での見え方を確認する意味
日本国内だけでも、男性の約20人に1人、女性の約500人に1人（全体で約300万人以上）が、特定の色の組み合わせを識別しにくい「色覚多様性（色弱・色覚特性）」を持っているとされています。つまり、40人のクラスや100人規模のユーザーの中には、必ず数人が該当する計算になります。
本ツールは、配色・グラフのパレット・画像そのものを、1型（P型）・2型（D型）・3型（T型）・全色盲（A型）の見え方に変換して確認できる色覚シミュレーターです。単に色を変換するだけでなく、どの色とどの色が混同しやすいのかを色差（ΔE）で自動検出し、WCAG基準のコントラスト比判定と改善案の提示まで一度に行えます。
Webサイト・アプリのUI、プレゼン資料のグラフ、案内表示や印刷物など、「色で情報を伝えている箇所」があるすべての制作物が対象です。すべての処理はブラウザ内で完結するため、未公開のデザインデータでも安全に検証できます。
こんなシーンで便利です
グラフ・インフォグラフィックの色分けを検証したい時に
円グラフや棒グラフの隣接する色が、2型（D型）の視点で同じ色に見えてデータの区別がつかなくなるリスクを、パレット一括判定で事前に洗い出せます。
完成したスライドや画面キャプチャをそのまま確認したい時に
画像をアップロードするだけで5種類の色覚タイプに一括変換。個別の色を入力し直すことなく、制作物全体の見え方をまとめて点検できます。
エラー表示・ステータス表示の視認性チェックに
赤色のアラートが1型（P型）の方に茶色や黒に見えて背景と同化し、見逃されないかを確認できます。成功を緑、失敗を赤で分ける設計の妥当性も検証できます。
ブランドカラーを変えずにWCAG基準を満たしたい時に
背景色を固定したまま、文字色の色相を保って明度だけを調整した改善案を自動で算出。AA・AAAを満たす具体的なHEXコードをその場で取得できます。
使い方は簡単 5ステップ
- 「配色をチェック」タブで、検証したい文字色と背景色をHEX入力またはカラーピッカーで指定します。
- コントラスト比と、通常テキスト・大きな文字・UI部品それぞれのWCAG判定を確認します。基準を満たさない場合は改善案をクリックして反映できます。
- 色覚タイプごとの変換結果の表で、それぞれの特性で実際に何色に見えるか（HEXコード）と色差を確認します。
- グラフの色を検証する場合は「パレット一括判定」タブで色を登録し、混同しやすい組み合わせの検出結果を確認します。
- 完成物をまとめて点検する場合は「画像シミュレーション」タブから画像をアップロードし、変換結果を保存して共有します。
※判別しにくい箇所が見つかった場合は、色相を変えるよりも「明度差をつける」「アイコンや模様を併用する」ほうが確実に改善できます。
ご利用時の注意点
- シミュレーションアルゴリズム：広く採用されている色変換行列（SVG feColorMatrix 互換）を使用して見え方を再現しています。個人差があるため、最終判断は当事者を含むレビューを推奨します。
- ディスプレイの限界：モニターの設定（ナイトモード、ブルーライトカット等）により、実際の色味と異なる場合があります。
- 色差（ΔE）の目安：本ツールではΔEが約12を下回る組み合わせを「混同しやすい」と判定しています。厳密な閾値ではなく、確認すべき箇所を絞り込むための指標としてご利用ください。
- 情報の二重化：アクセシビリティを向上させるには、色だけでなく「アイコン」「形」「テキスト」を併用することが推奨されます。
- 完全無料・安全：入力したHEXコードやアップロードした画像は一切送信されない、ブラウザ完結型を採用しています。
色覚タイプ別の特徴と、混同しやすい色の組み合わせ早見表
それぞれの色覚特性でどの色が区別しにくくなるのか、設計時に避けるべき組み合わせと代替案をまとめました。
| 色覚タイプ | 特徴 | 混同しやすい組み合わせ | 推奨される代替アプローチ |
|---|---|---|---|
| 1型色覚（P型） | 赤を感じる錐体の働きが弱く、赤が暗く沈んで見える | 赤と黒、赤と緑、ピンクと青 | 赤の代わりに朱色やオレンジを使い、明度差を大きく確保する |
| 2型色覚（D型） | 緑を感じる錐体の働きが弱い。最も頻度が高い | 赤と緑、黄緑と橙、青と紫 | 青と黄・オレンジの組み合わせに置き換え、形状の違いを併用する |
| 3型色覚（T型） | 青を感じる錐体の働きが弱い。頻度は非常に低い | 青と緑、黄とピンク、紫と黒 | 青系と緑系を隣接させず、テキストラベルを直接添える |
| 全色盲（A型） | 色相をほぼ感じず、明暗のみで判別する | 同じ明度の色すべて | 明度差を3段階以上つける、または模様やパターンで区別する |
| 加齢による変化 | 水晶体の黄変により短波長（青）が吸収されやすくなる | 青と黒、濃紺と濃い紫 | 背景と文字の輝度差を大きく取り、細い明朝体を避ける |
【WCAG 2.1 のコントラスト比基準】
通常テキストはレベルAAで4.5:1以上、レベルAAAで7:1以上。18pt以上（または14pt以上の太字）の大きな文字はAAで3:1以上、AAAで4.5:1以上。ボタンの枠線・アイコン・グラフの隣接色といった非テキスト要素は3:1以上が基準です。ロゴや純粋な装飾要素には規定がありません。
【ダークモード実装時の注意】
背景 #121212 に対してテキストを #FFFFFF にするとコントラストが強すぎてハレーション（目がチカチカする現象）が起きるため、#E0E0E0 前後のオフホワイトなど、わずかにグレーを混ぜた配色が推奨されます。
カラーユニバーサルデザイン（CUD）を制作フローに組み込む実践的なアプローチ
デザインの審美性とアクセシビリティを両立させるために、制作の初期フェーズから客観的な視認性評価を組み込み、手戻りを防ぐための実践的な進め方を整理しました。
結論：色覚対応の要は「色相を変えること」ではなく「明度差と情報の二重化」
色覚特性による見え方の差は主に色相の識別に現れるため、色相だけで情報を伝える設計はどの色を選んでも破綻のリスクが残ります。
もっとも確実なのは、区別が必要な要素の間に明度差を3段階以上つけることと、色に加えてアイコン・形状・模様・テキストラベルを併用する情報の二重化です。全色盲（A型）のシミュレーション結果でも区別がつくなら、ほぼすべての色覚タイプで成立していると考えられます。
グラフの色分けは「順番」と「明度」で設計し、凡例に頼らない
複数系列のグラフで色をパレットから順に割り当てると、隣接するセクターが似た明度になり、特定の色覚タイプで同化することがあります。
対策として、明度の高い色と低い色を交互に配置する、セクターの境界に白い細線（アウトライン）を入れる、凡例を別枠にせずグラフ内へ直接ラベルを配置する、という3点が効果的です。本ツールのパレット一括判定で、実際に使用する色の組み合わせを事前に検証してください。
デザインシステムでセマンティックカラーとトーンを先に定義する
プロダクト全体で一貫したアクセシビリティを維持するには、コンポーネントごとに配色を決めるのではなく、役割に意味を持たせたセマンティックカラーの設計が不可欠です。
プライマリーやサクセスといったコアカラーに対して、あらかじめ3つ以上の明度バリエーション（トーン）をセットで定義し、背景と文字の組み合わせをシステム的に制約することで、WCAG基準の充足とデザインの一貫性を同時に担保できます。
FigmaやCI/CDに検証を組み込み、リリース直前の手戻りを防ぐ
実装後の修正コストを抑えるには、デザインツールやコンポーネント管理環境の段階でコントラスト比の検証をワークフローへ組み込むことが重要です。
CI/CDパイプラインにAxe-core などの自動テストを導入してAA基準を動的に監視しつつ、色覚シミュレーションのように自動化しづらい観点は本ツールでのレビューを制作プロセスに明文化しておくと、リリース直前の配色不備を防げます。
高齢化・ロービジョンを含めた輝度設計まで視野に入れる
色覚多様性だけでなく、加齢に伴う水晶体の黄変や混濁により青色の短波長光が吸収されやすくなり、青と黒の識別が著しく困難になるユーザー層への配慮も必要です。
色相の違いだけに頼らず、テキストと背景の輝度差を明確に確保すること、細い書体や極端に小さい文字を避けることが、真のアクセシビリティ向上につながります。
よくある失敗と対策
赤と緑だけでエラーと成功を表現し、色覚多様性のユーザーを置き去りにする
フォームのバリデーションエラーを赤文字だけ、成功メッセージを緑文字だけでデザインしてしまう失敗です。1型（P型）や2型（D型）のユーザーからは赤と緑がどちらもくすんだ茶色や灰色のように見えてしまい、システムの状態を正しく認識できなくなります。
💡 対策・解決策を見る▼
個別の色だけを確認し、完成した資料全体のチェックを省略してしまう
メインカラー単体では問題がなくても、グラフ・アイコン・写真・背景が重なった実際の画面では、想定外の箇所で色が同化してしまう失敗です。パーツ単位の検証だけでは見落としが生じます。
💡 対策・解決策を見る▼
WCAGのコントラスト比基準を軽視し、薄いグレー文字で視認性を落とす
モダンなUIを意識するあまり白背景に薄いグレーの文字（#999999など）を多用し、AA適合基準である4.5:1を下回ってしまう失敗です。屋外の直射日光下や高齢者・ロービジョンのユーザーにとって読みづらく、離脱率の上昇やモバイルユーザビリティ評価の低下に直結します。
💡 対策・解決策を見る▼
ダークモードでコントラスト比を最大化しすぎ、ハレーションで目を疲れさせる
ダークテーマの背景を完全な漆黒（#000000）、文字色を純白（#FFFFFF）にしてしまう失敗です。コントラスト比は最高値の21:1を記録しますが、暗所では光の対比が強すぎて文字が滲むハレーション現象を引き起こし、読書体験を著しく損ないます。
💡 対策・解決策を見る▼
パステルカラーだけでパレットを組み、グラフのデータを誤認させる
デザインの美しさを優先してトーンの似通ったパステルカラーだけでパレットを構成した結果、3型（T型）や全色盲（A型）の環境で複数のデータ系列が単一の色に同化してしまう失敗です。売上推移グラフやダッシュボードのステータス表示で致命的なミスリードを生みます。
💡 対策・解決策を見る▼
ブランドカラーだからと修正をあきらめ、可読性の低い配色を放置する
コーポレートカラーの背景色は変更できないという理由で、コントラスト不足を承知のまま公開してしまう失敗です。実際には背景を変えずに文字色の明度だけで基準を満たせるケースが少なくありません。
💡 対策・解決策を見る▼
よくある質問（FAQ）
Q.色覚シミュレーションの結果はどのくらい正確に再現されていますか
A. カラーユニバーサルデザインの分野で広く採用されている色変換行列（SVG feColorMatrix 互換のマトリクス）を使用し、1型・2型・3型・全色盲それぞれの見え方を再現しています。あくまで代表的な特性をモデル化したものであり、個人差や、ディスプレイの設定・ナイトモード・ブルーライトカット機能の影響により実際の見え方とは差が出る場合があります。
Q.グラフや資料の画像そのものをシミュレーションできますか
A. できます。画像シミュレーションのタブから、円グラフ・棒グラフ・スライド・Webページのスクリーンショットなどをアップロードすると、5種類の色覚タイプでの見え方に一括変換して並べて表示します。変換後の画像はそれぞれダウンロードでき、社内レビューや提案資料の根拠としてそのまま使えます。すべてブラウザ内で処理されるため、画像が外部に送信されることはありません。
Q.グラフの色が区別しにくいかどうかを自動で判定できますか
A. できます。パレット一括判定のタブに使用中の色を最大10色まで登録すると、すべての組み合わせについて各色覚タイプでの色差（ΔE）を計算し、区別がつきにくくなるペアを自動で検出して一覧表示します。一般型では十分に離れて見える2色が、特定の色覚タイプでほぼ同じ色に収束してしまうケースを、目視ではなく数値で特定できます。
Q.赤と緑はなぜ避けたほうがよいのですか、代わりに何を使えばよいですか
A. 1型（P型）と2型（D型）は赤と緑を感じる錐体の働きが弱いため、赤と緑がどちらもくすんだ茶色や灰色に近づき、区別がつきにくくなります。日本人男性の約20人に1人が該当するとされるため影響範囲も広い組み合わせです。代替としては、青と黄・オレンジのように波長が大きく離れた組み合わせを使う、色相ではなく明度に差をつける、色に加えてアイコンや模様・テキストを併用する、といった方法が有効です。
Q.コントラスト比はいくつあれば基準を満たしますか
A. WCAG 2.1では、通常サイズのテキストはレベルAAで4.5:1以上、より厳格なレベルAAAで7:1以上が求められます。18pt以上（または14pt以上の太字）の大きな文字はAAで3:1以上、AAAで4.5:1以上です。ボタンの枠線やアイコン、グラフの隣接色といった非テキスト要素は3:1以上が基準です。本ツールはこれらを個別に判定し、基準を満たさない場合は色相を保ったまま明度だけを調整した改善案を提示します。
Q.背景色を変えずに文字色だけで基準を満たすことはできますか
A. 多くの場合できます。本ツールは、入力された文字色の色相と彩度を維持したまま明度だけを段階的に動かし、AA（4.5:1）およびAAA（7:1）を最初に満たすHEXコードを自動で算出します。ブランドカラーの背景を変更できない場合でも、文字色を数段階明るく（または暗く）するだけで基準を満たせるかどうかをその場で確認できます。
Q.ダークモードのコントラストはどう設計すればよいですか
A. 黒背景（#000000）に純白（#FFFFFF）の文字を置くとコントラスト比は最大の21:1になりますが、暗所では光の対比が強すぎて文字が滲むハレーション現象が起こり、かえって読みにくくなります。背景にわずかにグレーを含んだ#121212前後、文字色に#E0E0E0前後のオフホワイトを使い、4.5:1以上を確保しつつ21:1に近づけすぎないのが実務上の目安です。本ツールで両方の数値を比較しながら調整できます。
Q.スマートフォンやタブレットのブラウザからでも利用できますか
A. はい、利用できます。レスポンシブ設計のため、外出先での検品やクライアントへの説明の場でも、色覚シミュレーション・パレット判定・コントラスト比の確認をそのまま行えます。画像シミュレーションもスマートフォンのカメラロールから直接アップロードして実行できます。
Q.入力した配色や画像のデータが外部に漏洩するリスクはありますか
A. 一切ありません。本ツールは完全ローカル処理型の設計で、入力されたHEXコード・カラーパレット・アップロードした画像はサーバーへ一切送信されず、保存も行われません。すべての処理はブラウザ内で完結し、ページを閉じれば即座にデータは消去されます。登録やログインも不要です。
あなたの声で、
このツールをより鋭く。
「こんな機能が欲しい」「ここを直してほしい」といったご意見や、新しいツールのリクエストを募集しています。エンジニアが直接目を通し、開発の参考にさせていただきます。