ツール一覧
ToolsAAWCAG Accessibility

色覚特性・色覚多様性シミュレーター (WCAG対応) 技術仕様ガイド

1型色覚(赤)、2型色覚(緑)、3型色覚(青)、全色盲の見え方をブラウザ内のSVGマトリクスフィルターでリアルタイムに検証します。

シミュレーション種別を選択
UI

Interactive Checkout Card

Verifying state indicators & badges

Active Status
Payment verification required for this transaction.
Warning: Delivery to this region may incur additional duties.
Free shipping threshold achieved for this order.

Machado & Brettel Matrices

Employs peer-reviewed colorimetric transformation matrices to accurately map LMS cone sensitivity deficiencies.

Full WCAG 2.1 Conformance

Helps designers and QA engineers verify that contrast levels remain readable (4.5:1 ratio) across all color vision variants.

100% In-Browser Rendering

Every pixel is computed locally by your GPU and SVG rasterizer. Uploaded design mockups never leave your local device.

技術リファレンス&アーキテクチャガイド

色覚特性・色覚多様性シミュレーター (WCAG対応) 技術仕様ガイド — リファレンスガイド

1型色覚(赤)、2型色覚(緑)、3型色覚(青)、全色盲の見え方をブラウザ内のSVGマトリクスフィルターでリアルタイムに検証します。

主要パラメータ&設定項目

色覚特性タイプP型(1型) | D型(2型) | T型(3型) | A型(全色盲)

SVGのfeColorMatrix変換行列により忠実に再現される色覚モデル。

シミュレーション強度0%〜100%

軽度の色弱(異常3色覚)から完全な2色覚までの知覚シミュレーション強度。

検証対象画像画像ファイル | プリセット

ブラウザ内でリアルタイムに色相変換が行われる画像またはUI要素。

WCAGコントラスト基準4.5:1 (AA) | 7:1 (AAA)

JIS X 8341-3およびWCAG 2.1で求められるテキストの最小視認性基準。

プロの活用テクニック&推奨設定

よくあるトラブルと解決策

原寸または2倍の高解像度画像をアップロードすることで鮮明にシミュレーション可能です。

SVG feColorMatrixをサポートする最新のモダンブラウザをご利用ください。

よくある質問 (FAQ)

シミュレーションのアルゴリズムは学術的根拠に基づいていますか?▼

はい。眼科学および色彩学で標準的に用いられるMachado・Brettelらの混色理論モデルを採用しています。

アップロードしたデザイン画像が外部に流出する心配はありませんか?▼

一切ありません。すべての画像処理とCanvasレンダリングは端末内メモリでのみ実行されます。

P型(赤色盲)とD型(緑色盲)の違いは何ですか?▼

P型は赤の受容錐体が欠損し赤が非常に暗く見えます。D型は緑の受容錐体が欠損し赤と緑の区別が難しくなります。

WCAG 2.1の達成基準を満たすための目安は?▼

すべての色覚シミュレーションにおいて、文字と背景のコントラスト比が4.5:1以上(大きな文字は3:1以上)を保つことが求められます。

関連するおすすめ開発ツール

すべてのツール →
SVGからCSS background-image・Data URI変換 開発者ガイドdesign

SVGコードを圧縮・URLエンコードし、CSSのbackground-image、mask-image、Data URIプロパティへブラウザ内で即時変換します。

ツールを開く→
Open Graph (OGP) プロトコル&SNSカード仕様ガイドdesign

Open Graphプロトコル、X(旧Twitter)カード仕様、推奨画像サイズ(1200x630)、クローラーキャッシュ対策の技術解説。

ツールを開く→
インタラクティブ CSS グラデーションジェネレーター(線形・放射状)design

マルチカラーストップ、角度調整、放射状・円形シェイプ、プリセットパレットを備えた視覚的なCSSグラデーション作成ツール。ワンクリックでCSSコードを出力可能。

ツールを開く→
インタラクティブ SVG コード最適化&軽量化ツールdesign

ブラウザ上でSVGグラフィックスから不要なメタデータやコメントを除去・軽量化し、視覚的な品質を損なわずにファイルサイズを大幅に削減します。

ツールを開く→
カラーパレット抽出&コントラストチェッカーdesign

WCAG 2.1アクセシビリティ準拠のコントラスト比検証と、調和のとれた配色パレットを即座に生成します。

ツールを開く→
グラスモーフィズム CSS ジェネレーターdesign

背景のぼかし(backdrop-filter)、透明度、境界線効果をリアルタイムに調整できるモダンなすりガラスUI作成ツール。

ツールを開く→