カラーコントラストマトリクス
パレット内の色同士のコントラスト比をまとめて比較します。
このツールについて
パレット内のすべての色を相互に比較し、WCAGコントラスト比と合否を確認します。
テキスト、バッジ、チャートラベル、デザイントークンの組み合わせを実装前に確認できます。
| コントラスト | ||||
|---|---|---|---|---|
| #111827 | 1.00 通常テキスト: 未達 大きいテキスト: 未達 | 3.43 通常テキスト: 未達 大きいテキスト: 合格 | 6.33 通常テキスト: 合格 大きいテキスト: 合格 | 17.74 通常テキスト: 合格 大きいテキスト: 合格 |
| #2563EB | 3.43 通常テキスト: 未達 大きいテキスト: 合格 | 1.00 通常テキスト: 未達 大きいテキスト: 未達 | 1.84 通常テキスト: 未達 大きいテキスト: 未達 | 5.17 通常テキスト: 合格 大きいテキスト: 合格 |
| #F97316 | 6.33 通常テキスト: 合格 大きいテキスト: 合格 | 1.84 通常テキスト: 未達 大きいテキスト: 未達 | 1.00 通常テキスト: 未達 大きいテキスト: 未達 | 2.80 通常テキスト: 未達 大きいテキスト: 未達 |
| #FFFFFF | 17.74 通常テキスト: 合格 大きいテキスト: 合格 | 5.17 通常テキスト: 合格 大きいテキスト: 合格 | 2.80 通常テキスト: 未達 大きいテキスト: 未達 | 1.00 通常テキスト: 未達 大きいテキスト: 未達 |
使い方
- 1
必要な値を入力するか、テキストを貼り付けます。
- 2
オプションや単位を目的に合わせて調整します。
- 3
表示された結果を確認し、必要な場所へコピーして使います。
機能
即時結果
値を入力するとブラウザ内で結果がすぐに更新されます。
ブラウザ内処理
入力値はサーバーへアップロードせず、端末内で処理されます。
シンプルな入力
繰り返し使いやすい入力欄と見やすい結果を用意しています。
無料で利用
登録やインストールなしでそのまま使えます。
主な用途
- ›パレットからアクセシブルなテキスト/背景ペアを探します。
- ›ボタン、バッジ、アラートに使える色の組み合わせを選びます。
- ›デザインレビュー用のコントラスト比を整理します。