色覚シミュレーター
カラー
チャート、ダッシュボード、デザインのスクリーンショットをドロップし、8 種類のシミュレーション表示を切替：通常、完全色覚異常 3 種（赤色覚異常 / 緑色覚異常 / 青色覚異常）、軽度の色弱 3 種、完全モノクロ（全色盲）。各変換は Canvas で 1 ピクセルずつ線形マトリクスを適用。リリース前のチャートやパレットの点検に便利。
—
視覚タイプ
シミュレーションについて
色覚シミュレーションは線形 RGB 変換（Brettel/Viénot 系マトリクス）を使用。実際の視覚の臨床的再現ではなく近似値です。重要なアクセシビリティ判断は実ユーザーや WCAG ツールで合わせて検証してください。
使い方
- チャート、パレット、デザインのスクリーンショットをドロップ。
- チップで視覚タイプごとの見え方を確認。
- 現在のシミュレーションを画像保存してチーム共有。
よくある質問
- 科学的に正確？
- Brettel / Viénot / Mollon 系列の広く引用される線形 RGB 変換に基づく近似値。実際の見え方は人それぞれなので「こう見えるかもしれない」程度の参考に。
- 最も多いタイプは？
- 緑色弱（Deuteranomaly）が圧倒的に多い — 男性の約 5%。赤色弱と赤 / 緑色覚異常を合わせれば CVD の大部分を占めます。
- 全色盲（achromatopsia）とは？
- 完全な色覚異常 — 世界がグレースケールに見える状態。極めて稀ですが最悪ケースの点検に有用：純グレーで動くデザインは誰にも動きます。
- 画像はアップロードされる？
- いいえ — Canvas でローカル処理。画像とマトリクスは両方ブラウザ内に留まります。
関連ツール
画像からカラーパレット抽出
画像をドロップすると Canvas で主要色を分析しパレット抽出 — HEX をコピーまたは一括取得。
カラー00
CSS Box Shadow ジェネレーター
複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。
カラー00
カラーフォーマット変換
任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。
カラー00
CSS グラデーションジェネレーター
線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。
カラー00
カラーパレット ジェネレーター
基準色から 6 種類のスキームで調和の取れたパレットを作成。
カラー00
カラーコントラスト チェッカー
文字／背景のコントラストを WCAG AA・AAA 基準でチェック。
カラー00