このツールに問題がありますか？

「Color Blindness CSS Reference Online」について

このツールは、色覚異常のユーザーにも使えるアクセシブルなカラーパレットを設計するための CSS リファレンスを生成します。プロタノピア／デュータノピア／トリタノピア／全色盲での見え方を示し、より安全な代替色を提案します。

男性の約 8%、女性の約 0.5% に何らかの色覚異常があります。完全色覚だけを前提にすると除外することになります。安全な色対の使用と、色だけに頼らない（形・テキスト・パターンも併用）デザインで全員に届きます。

ブランドパレットの検証、既存デザインのアクセシビリティ監査、避けるべき色対の学習に使えます。

このツールの使い方

色覚多様性シミュレーション用の CSS filter スニペットを取得する手順

  1. 入力なしで実行

    本ツールに入力欄はありません — Run を押すだけ。スタイルシートにそのまま貼れる CSS スニペットを返します（追加設定なし）。

  2. 出力内容

    結果は `css` のみで、3 つのフィルタクラス：`.cb-protanopia`、`.cb-deuteranopia`、`.cb-tritanopia`。各クラスは SVG の `feColorMatrix` で当該色覚特性を近似します。

  3. 使い方

    対応するクラスを `body`（またはラッパー）に付けると、赤緑色覚特性をもつ約 8% の男性、または青黄色覚特性のより少数のユーザーが見るデザインをプレビューできます。DevTools で切り替えれば再ビルド不要。

  4. 注意点

    これらは線形近似で、実際の色覚はもっと複雑です。Sim Daltonism（macOS）や Coblis はより良いモデルを使います。WCAG コントラストチェック（wcag-contrast-checker-online）と必ず併用してください — 色だけに情報を担わせないこと。

似たツール