色コントラストグリッド
カラーパレット全体のWCAG 2.x コントラスト比を一度にチェック：16進数カラーのリストを貼り付けると、完全なペアワイズグリッドが表示され、すべての組み合わせの正確な比率とAAの合否が表示されます。デザインシステムのカラーパレットのアクセシビリティ監査に最適です。
入力
1行に1つの16進数カラー、またはカンマ区切り（例："#000000, #FFFFFF, #FF0000"）。最大12色；無効なエントリはスキップされます。
出力
| No data yet |
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-contrast-grid \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"colors": "#000000\n#FFFFFF\n#808080"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `color-contrast-grid` tool (Color Contrast Grid) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/color-contrast-grid/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="色コントラストグリッド — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|
次の方法でも利用可能
ガイド
ほとんどのコントラストチェッカーは、1つの前景色と1つの背景色を一度に比較します。デザインシステムは1つのペアに限りません。パレットには5つのブランドカラー、3つのニュートラルカラー、2つのアクセントカラーがあり、そのいずれかが他のカラーの上にテキストとして表示される可能性があります。色コントラストグリッドは、パレット全体を一度にチェックします。16進数カラーのリストを貼り付けると、完全なペアワイズマトリックスが表示され、すべての組み合わせに対して正確なWCAG 2.x コントラスト比とAA合否が表示されます。
WCAG色コントラストとは？
WCAG 2.xは相対輝度を定義します。これは色がどれほど明るく見えるかで、人間の目が赤、緑、青をどのように認識するかを考慮したもの（L = 0.2126×R + 0.7152×G + 0.0722×B、線形化されたsRGBチャネルを使用）と、2つの色の間のコントラスト比 (L1 + 0.05) / (L2 + 0.05)（より明るい上でより暗い）です。これは1:1（同じ色）から21:1（純粋な黒い純粋な白）の範囲です。通常のテキストに対するWCAG AAの閾値は4.5:1です。これは、ほとんどのアクセシビリティ監査、Lighthouse、および法的標準（ADA、EN 301 549、Section 508）が必要とするゲージです。このツールは4.5:1を超えるすべてのセルに✓でマークし、そうでないセルには✗でマークします。
使い方
- 色フィールドにパレットを貼り付けます。1行に1つの16進数カラー、またはカンマ区切り（例：
#000000, #FFFFFF, #FF0000）。3桁の16進数（#fff）も機能します。 - グリッドが瞬時に更新されます。最初の行と最初の列にカラーが表示され、他のすべてのセルにはその行のカラーがテキストとして、その列のカラーが背景として使用された場合のコントラスト比が表示されます。例：
4.53:1 ✓。 - グリッドをスキャンして✗セルを探します。これらは、一緒に使用された場合、通常のテキストのWCAG AAに失敗する可能性があるペアであり、回避するか調整する価値があります。
- CopyまたはDownloadを使用して、グリッドをCSVとしてエクスポートし、デザインシステム監査またはプルリクエストコメント用に使用できます。
1つのグリッドあたり最大12色（144セル）がサポートされています。ほとんどのブランドおよびUIニュートラルパレットを一度にチェックするのに十分です。有効な3桁または6桁の16進数カラーでないエントリは、グリッドを壊さずにスキップされ、重複するカラーは1つにまとめられます。
FAQ
対角線がいつも1.00:1でマークされ、✗がついているのはなぜですか？ 色をそれ自体と比較すると、輝度が同じになるため、比率は正確に1:1になります。これは可能な最小値で、AA 4.5:1の閾値をはるかに下回ります。これは予想されることです。対角線は意味のあるペアではなく（誰もテキストと背景を同じ色に設定しません）、グリッドがN×Nであるという副産物です。
グリッドは対称ですか？ はい。コントラスト比は定義により対称です（どの輝度がより明るく、どれがより暗いかのみに依存し、どの色が「前景」であるかには依存しません）。したがって、色A上の色Bは常に色B上の色Aと同じです。
✓/✗マーク—AAですか、それともAAAですか？ 合否マークはWCAG AA通常テキストを使用しており、ほとんどの監査と法的標準がチェックしている閾値（≥4.5:1）です。✗でマークされたペアは、より緩いAA大型テキスト閾値（3:1）を依然として合格できる場合があります。4つのWCAG閾値（AA/AAA×通常/大型）すべてにわたる単一ペアの詳細なブレークダウン（提案されたアクセス可能な色を含む）については、Accessible Color Pair Finderを使用してください。
名前または追加テキストが付いた色を貼り付けることができますか？
このツールは各行またはカンマ区切りエントリの最初にある有効な16進数カラー（#RRGGBBまたは#RGBとしてフォーマットされたテキスト）を探します。認識可能な16進数カラーでないものはすべてスキップされるため、各エントリを色のみにしてください。
リストが12色に制限されているのはなぜですか？ 12色を超えると、グリッドは144個以上のセルに成長し、視覚的にスキャンするのが難しくなります。より大きいパレットをチェックする必要がある場合は、関連する小さなグループに分割してください（例えば、ニュートラル、次にブランドカラー）。
色データはどこかに送信されていますか？ いいえ。すべての計算はブラウザ内で完全に実行されます。何もアップロードされたり保存されたりしません。