2色を指定すると、色差・明るさ・鮮やかさ・色相・コントラストまで比較できます。
1色目
2色目
比較例をワンクリックで試す
色名でもHEXでも比較できます
写真・画像の「この点の色」を調べる
比較したい色が写真の中にあるなら、先にその場所の色コードを取得できます。 画像をアップロードしてカーソルを合わせると、元画像のその1pxのHEX・RGB・HSLをリアルタイムで確認できます。ルーペと周辺平均にも対応しています。
色を比較する
2色の違いを数値と見た目で比べる
似ている2色を、見た目だけでなく色差・明るさ・カラーコードの違いから比較できます。配色で迷ったときや、近い色の違いを確認したいときに使えます。
色を比較するときによくある質問
似ている2色の違いはどうやって調べますか？
2色を指定すると、カラーコードや色差などを使って違いを確認できます。見た目が近い色ほど数値比較が役立ちます。
画像の中にある2色を比較できますか？
先に画像から色を調べるツールでそれぞれのカラーコードを取得し、その2色を比較ページへ入力すると確認できます。
比較した色をそのまま配色に使えますか？
はい。比較後に配色ラボへ進み、他の色も加えてパレットとして検討できます。
色覚タイプ別に、2色の差がどれくらい残るかを見る
上で2色を比較すると、元の見え方に加えてP型・D型・T型の参考シミュレーションを表示します。 色面だけでなく、シミュレーション後のΔE00とコントラスト比も確認できます。
臙脂色
×ワインレッド
元の2色の ΔE0011.20
A #534E40
B #3B3C3F
参考表示
P型強度の参考
1型2色覚 / Protanopia色差 ΔE0011.41
コントラスト比1.33:1
はっきり異なる（一般的な色差の目安）
明度差の参考：3:1未満A #72693D
B #524E3D
参考表示
D型強度の参考
2型2色覚 / Deuteranopia色差 ΔE0012.79
コントラスト比1.51:1
大きく異なる（一般的な色差の目安）
明度差の参考：3:1未満A #BE0B37
B #8C1831
参考表示
T型強度の参考
3型2色覚 / Tritanopia色差 ΔE009.87
コントラスト比1.44:1
はっきり異なる（一般的な色差の目安）
明度差の参考：3:1未満
重要：この数値だけで「アクセシブル／非アクセシブル」を判定しません。
WCAG 2.2の基本は、情報や状態を色だけで区別しないことです。 文字・アイコン・形・線種・模様などを併用してください。