カラーアクセシビリティ・パレット作成
色や画像からカラーパレットを作成し、WCAG 2.2コントラスト比の検証、修正候補の生成、色覚シミュレーション、CSS・Tailwind・JSON等のコード出力をブラウザ完結で行えます。
- WCAG 2.2基準に準拠したコントラスト比（AA / AAA / 非テキスト）の精密検証
- コントラスト不足時に元色のニュアンスを保つOKLCH最小変更修正候補の自動生成
- 画像からの完全ローカル（サーバー非送信）パレット抽出と主要色タグ付け
- 1色型・2型・3型色覚および全色盲シミュレーションと実UIプレビュー
- CSS変数・SCSS・Tailwind CSS・Design Tokens JSON・SVG・PNG・ZIP出力
Start From
Color Inspector
ベースカラーを入力（HEX, RGB, HSL, OKLCH）
#4F46E5
rgb(79, 70, 229)
hsl(243, 75%, 59%)
hsv(243, 69%, 90%)
oklch(0.5106 0.2301 277)
カラーパレット一覧
8 colorsPrimary Indigo
Sky Blue
Amber Accent
Text Gray 900
Muted Gray 500
White Background
Surface Gray 100
Border Gray 200
WCAG 2.2 コントラスト検証
WCAG 2.2 Success Criterion 1.4.3 (Contrast Minimum) & 1.4.6 (Enhanced)
Passes WCAG AA for normal & large text
Large Headline (18pt Bold / 24px)
This is regular body text preview (16px / 1rem). Ensure high readability for all users, including those with low vision or varying environmental light conditions.
アクセシブル修正候補（OKLCH最小変更）
Perceptually uniform OKLCH binary search for minimal color distortion (lowest ΔE)
Preview Text
Contrast: 18.63:1
Palette Contrast Matrix
Cross-audit all foreground and background combinations across your palette. Click any cell to test.
| FG ↓ \ BG → | 4F46E5 | 0EA5E9 | F59E0B | 111827 | 6B7280 | FFFFFF | F3F4F6 | E5E7EB |
|---|---|---|---|---|---|---|---|---|
#4F46E5 | — | 2.27 | 2.93 | 2.82 | 1.3 | 6.29 | 5.71 | 5.08 |
#0EA5E9 | 2.27 | — | 1.29 | 6.4 | 1.74 | 2.77 | 2.52 | 2.24 |
#F59E0B | 2.93 | 1.29 | — | 8.26 | 2.25 | 2.15 | 1.95 | 1.73 |
#111827 | 2.82 | 6.4 | 8.26 | — | 3.67 | 17.74 | 16.12 | 14.33 |
#6B7280 | 1.3 | 1.74 | 2.25 | 3.67 | — | 4.83 | 4.39 | 3.9 |
#FFFFFF | 6.29 | 2.77 | 2.15 | 17.74 | 4.83 | — | 1.1 | 1.24 |
#F3F4F6 | 5.71 | 2.52 | 1.95 | 16.12 | 4.39 | 1.1 | — | 1.13 |
#E5E7EB | 5.08 | 2.24 | 1.73 | 14.33 | 3.9 | 1.24 | 1.13 | — |
実コンポーネントプレビュー
Test theme colors in realistic UI layouts with WCAG SC 1.4.1 compliance
Analytics Overview
Updated 5 minutes ago
Total Users
24,592
Conversion Rate
3.48%
Error Incidents
2
色覚特性シミュレーション
Test how color vision deficiency affects your palette and chart readability
Deuteranopia (Green-blind)
Medium-wavelength (M) cone absence; difficulties distinguishing red and green.
※ 数学モデルに基づく近似シミュレーションです。実際の色覚知覚には個人差があります。
Palette Simulation
#4C4CC6
orig: #4F46E5
#6A60D8
orig: #0EA5E9
#DAE05B
orig: #F59E0B
#141323
orig: #111827
#6E6D7C
orig: #6B7280
#FFFFFF
orig: #FFFFFF
#F3F3F5
orig: #F3F4F6
#E6E6EA
orig: #E5E7EB
Accessible Multi-Series Chart Preview
WCAG SC 1.4.1 Compliant: Differentiating series with both color, stroke styles, and shape markers
グラデーション・アクセシビリティ解析
Multi-point contrast risk analysis across gradient color stops
Gradient Hero Headline
Background gradients can create unexpected readability zones where contrast drops below WCAG requirements.
background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);画像オーバーレイ・読みやすさ検証
Calibrate scrim overlay opacity to guarantee readable text over varied images
Scenic Horizon Photography
Semi-transparent scrim layers ensure dependable legibility regardless of underlying image luminance spikes.
background-color: rgba(0, 0, 0, 0.50);コード・アセット出力
Export tokens to CSS variables, SCSS, Tailwind v3/v4, W3C JSON, SVG, PNG, or complete ZIP archive
:root {
/* Palette Tokens */
--color-primary-indigo: #4F46E5;
--color-sky-blue: #0EA5E9;
--color-amber-accent: #F59E0B;
--color-text-gray-900: #111827;
--color-muted-gray-500: #6B7280;
--color-white-background: #FFFFFF;
--color-surface-gray-100: #F3F4F6;
--color-border-gray-200: #E5E7EB;
/* Semantic Roles (Light Theme) */
--color-primary: #4F46E5;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #FFFFFF;
--color-surface: #F8FAFC;
--color-text: #0F172A;
--color-mutedText: #64748B;
--color-border: #E2E8F0;
--color-focus: #4F46E5;
--color-success: #16A34A;
--color-warning: #D97706;
--color-danger: #DC2626;
--color-info: #0284C7;
/* Interactive States */
--color-primary-hover: #4433D3;
--color-primary-active: #3A1DC2;
--color-primary-focus: #4F46E5;
--color-primary-disabled: #A8ACC4;
}
@media (prefers-color-scheme: dark) {
:root {
--color-primary: #7579FF;
--color-secondary: #0EA5E9;
--color-accent: #F59E0B;
--color-background: #0F172A;
--color-surface: #1E293B;
--color-text: #F8FAFC;
--color-mutedText: #94A3B8;
--color-border: #334155;
--color-focus: #818CF8;
--color-success: #4ADE80;
--color-warning: #FBBF24;
--color-danger: #F87171;
--color-info: #38BDF8;
--color-primary-hover: #8389FF;
--color-primary-active: #9299FF;
--color-primary-focus: #7579FF;
--color-primary-disabled: #37394A;
}
}「カラーアクセシビリティ・パレット作成」について
Solasuの「Color Accessibility & Palette Studio（カラーアクセシビリティ・パレット作成）」は、単なるカラーピッカーやコントラストチェッカーではありません。
「色を作成する」「画像から抽出する」「配色を組む」「WCAG 2.2基準でアクセシビリティを検証する」「コントラスト不足を最小限の変更で修正する」「Light / Dark UIで確認する」「色覚特性シミュレーションを行う」「CSS・Tailwind・JSON・SVG・PNG・ZIPとして実装コードを持ち出す」という一連のプロフェッショナルなデザインワークフローをブラウザ完結で提供します。
アップロードされた画像やパレットデータはSolasuの外部サーバーへ送信されることは一切なく、端末内メモリのみで高速かつ安全に動作します。
W3C / WCAG 2.2基準に準拠した厳密なコントラスト計算
単純なRGB差分ではなく、W3C WCAG 2.2仕様に規定されたsRGBガンマ線形化（Linearization）と相対輝度（Relative Luminance）計算式（L = 0.2126*R + 0.7152*G + 0.0722*B）を厳密に実装しています。
通常テキスト（AA: 4.5:1、AAA: 7.0:1）、大文字テキスト（AA: 3.0:1、AAA: 4.5:1）、およびUI部品・枠線などの非テキストコントラスト（3.0:1）を個別に評価し、不足している比率を明確に表示します。
OKLCH色空間に基づく「最小変更」アクセシブルカラー修正
コントラスト比が不足している場合、人間の視覚に均一な知覚色空間である「OKLCH」を用いて、元の色相（Hue）やニュアンスを最大限に維持しながら、4.5:1や7.0:1の基準を満たす修正候補色を自動生成します。
背景色固定・前景色固定・両方の微調整（デュアル調整）の複数パターンを算出し、Delta E（色差）による客観的な変化量ラベル（Small / Medium / Large）とともに提示します。
画像からの完全ローカル・パレット抽出（Median Cut）
JPEG、PNG、WebPなどの画像から、代表的なカラーパレット（Dominant、Accent、Neutral、Dark、Light）を自動抽出します。アルゴリズムには実績のあるMedian Cut減色法を採用し、半透明・透明ピクセル（アルファ値128未満）を自動除外します。
大容量画像でもブラウザがフリーズしないよう、長辺1000pxへの最適ダウンサンプリングと64MP上限ガードを備えています。画像データは一切サーバーへ送信されません。
色覚特性シミュレーションと実UIコンポーネントプレビュー
1型色覚（P型・赤色盲）、2型色覚（D型・緑色盲）、3型色覚（T型・青黄色盲）、および全色盲（Achromatopsia）のシミュレーション行列を実装。単なる色見本だけでなく、ボタン、フォーム、ダッシュボード、グラフなどの実際のUI上で見え方を確認できます。
WCAG 2.2 達成基準 1.4.1（色の使用）に基づき、エラーやステータスを色だけで伝達している場合に警告を表示し、アイコンやテキストを併用したアクセシブルなUI設計を支援します。
CSS変数・Tailwind CSS・Design Tokens・SVG・ZIPの一括出力
作成したパレットは、最新のTailwind CSS（v3 / v4）、CSSカスタムプロパティ（ホバー・アクティブ・フォーカス状態およびダークモード対応）、SCSS、W3C Design Tokens形式のJSONへワンクリックで出力・コピーできます。
さらにSVGベクタースウォッチ、PNG画像シート、および全ファイルをまとめたZIPアーカイブとしてダウンロード可能です。
よくある質問 (FAQ)
このツールは無料で使えますか？登録は必要ですか？
はい、完全無料でご利用いただけます。アカウント登録やログインも不要で、ブラウザを開くだけですぐにお使いいただけます。
アップロードした画像やカラーパレットは外部サーバーに保存されますか？
いいえ、一切保存されません。すべての画像解析・色計算・コード生成はお使いのブラウザ内部（クライアントサイド）のみで処理され、外部通信は0回です。
対応しているカラーコードの形式は何ですか？
HEX（3桁、4桁、6桁、8桁）、RGB、RGBA、HSL、HSLA、HSV、およびOKLCH形式の入出力に対応しています。
WCAG 2.2のコントラスト比はどのように計算されていますか？
W3C WCAG 2.2仕様に厳密に準拠し、各sRGBチャンネルをガンマ補正解除して相対輝度（L）を算出した上で、(Lighter + 0.05) / (Darker + 0.05) の比率を求めています。
AAとAAAの基準値の違いは何ですか？
通常の本文テキストでは、AA基準で4.5:1以上、AAA基準で7.0:1以上のコントラスト比が求められます。大文字テキストではAAで3.0:1以上、AAAで4.5:1以上となります。
「大文字テキスト（Large Text）」とは具体的にどのサイズですか？
WCAG 2.2では、18pt（約24px）以上、または太字（bold）であれば14pt（約18.66px）以上のサイズが大文字テキストとして定義されています。
非テキストコントラスト（Non-text Contrast）とは何ですか？
WCAG 2.2 達成基準 1.4.11により、ボタンの境界線、入力欄の枠線、チェックボックス、アイコンなど、機能や情報を伝えるUI部品は隣接する背景に対して3.0:1以上のコントラストが求められます。
コントラスト比が不足している場合、修正候補はどのように生成されますか？
知覚的に均一なOKLCH色空間上で明度（L）の二分探索を行い、元の色相や彩度のニュアンスを可能な限り保ちながら、必要なコントラスト閾値を満たす候補色を算出します。
「最小変更」とはどういう意味ですか？
Oklab色空間における色差（Delta E）を最小化し、元のブランドカラーや意図した色合いから極力離れずにコントラスト基準をクリアできる近似色を見つける手法です。
画像からどのようにカラーパレットを抽出していますか？
画像をCanvas上でデコードし、Median Cut（中央値切断法）減色アルゴリズムを用いて支配的な色クラスタを抽出・集約しています。抽出色数は5〜24色の間で選択可能です。
画像の透明部分（透過PNGなど）はどのように扱われますか？
アルファ値が128未満の半透明・完全透明ピクセルはパレット抽出の計算対象から自動的に除外されるため、透明背景の黒や白に偏る心配がありません。
非常に大きな画像をアップロードしても大丈夫ですか？
はい。解析前に長辺1000px程度へ自動ダウンサンプリングするため、高解像度写真でもブラウザがメモリ不足でクラッシュすることなく快適に動作します。安全上限は8192px / 64MPです。
色覚シミュレーションは実際の視覚を完全に再現していますか？
いいえ。色覚シミュレーションは線形RGB変換行列に基づく数学的近似モデル（Brettel / Machado法）です。実際の見え方には個人差があります。
シミュレーションできる色覚特性の種類は何ですか？
1型色覚（P型・赤色盲）、2型色覚（D型・緑色盲）、3型色覚（T型・青黄色盲）、および明暗のみを識別する全色盲（Achromatopsia）の4種類に対応しています。
グラフやチャートでの「色だけに依存しない設計」とは何ですか？
WCAG 2.2 達成基準 1.4.1に従い、データ系列を色分けするだけでなく、点線・破線などの線種パターン、マーカー形状、直接テキストラベルを併用して誰でも判別できるようにする設計です。
ダークモードのパレットはどのように作成・検証されますか？
暗い背景色（#0F172A等）に対してプライマリカラーやテキスト色の明度を最適化し、ダークテーマ専用のコントラストマトリクスで各役割の視認性を検証できます。
グラデーションのコントラストはどのように判定されますか？
グラデーション全体を1つのコントラスト比で表すことはせず、0%から100%までの11箇所のサンプリング地点で文字色とのコントラストを計測し、局所的な視認性低下リスクを警告します。
写真や画像の上に文字を置く場合の基準はありますか？
画像全体の平均輝度から白文字・黒文字の推奨を判定し、背景の明暗ムラがあっても十分なコントラストを確保できるよう、半透明スクリム（黒または白の透過帯）の最適な不透明度を提示します。
Tailwind CSS用のエクスポートには対応していますか？
はい。Tailwind v3の設定ファイル形式（theme.extend.colors）と、Tailwind v4のCSS変数形式（@theme）の両方に対応しています。
出力したZIPファイルには何が含まれますか？
CSS変数ファイル（palette.css）、SCSSファイル（palette.scss）、Tailwind設定（tailwind.config.js）、Design Tokens（tokens.json）、SVGベクタースウォッチ（palette.svg）、PNGシート（palette.png）が含まれます。
スマートフォンやタブレットのブラウザでも利用できますか？
はい。レスポンシブデザインに対応しており、iPhone（iOS Safari）やAndroid（Chrome）のモバイルブラウザでもパレット作成やコントラスト確認が可能です。
コントラスト基準を満たせば、アクセシビリティは完全に保証されますか？
いいえ。コントラストはWCAG 2.2の重要な達成基準の1つですが、文字サイズ、キーボード操作性、スクリーンリーダー対応、フォント選定など他の要素も総合的に満たす必要があります。