カラーピッカー＆コントラストチェッカー

カラーピッカー＆コントラストチェッカーの使い方

何を計算するか、いつ使うか

色を選び、HEX・RGB・HSL・HSV・CMYKの間で変換し、ティント・シェード・相性の良い色を提案し、テキストのコントラストをWCAGアクセシビリティガイドラインでチェックします。

使い方の手順

1. ピッカーで色を選ぶか、HEX・RGB・HSL・色名で入力します。
2. コントラストをチェックする背景色を選びます。
3. どの形式もワンクリックでコピーできます。
4. ティント・シェード・相性の良い色を使ってパレットを作ります。

各入力項目の意味

• 色 – 初期値はSmartCalcyブルーの#2443C8です。
• 背景 – 初期値は白です。

結果の読み方

• コントラスト比 – 1:1から21:1まで。通常テキストと大きいテキストのAA・AAAの判定付き。
• 形式 – HEX、RGB、HSL、HSV、CMYK。
• ティントとシェード – 明るい色と暗い色のバリエーション。
• 相性の良い色 – 補色、類似色、トライアド。

計算式

コントラスト比 = (L1 + 0.05) ÷ (L2 + 0.05)。L1とL2は明るい色と暗い色の相対輝度です。WCAG AAでは通常テキストに4.5:1、大きいテキストに3:1が必要で、AAAでは7:1と4.5:1が必要です。

計算例

初期の色では、白地に#2443C8のコントラスト比は7.74:1で、すべての文字サイズでAAAに合格します。

前提と限界

• CMYKの値は単純な変換で、カラーマネジメントされた印刷プロファイルではありません。
• コントラストの結果はWCAG 2の計算式に従います。

よくある間違い

• 大きいテキストでだけコントラストを確認し、その色を小さいテキストに使うこと。
• 色だけで意味を伝えようとすること。

よくある質問

関連ツール