色コード変換
HEX・RGB・HSLの色コードを相互変換します。カラーピッカー付き。
カラーコントラストチェッカー
文字色と背景色のコントラスト比を計算し、WCAG 2.1のAA・AAA基準に適合するか判定します。アクセシビリティに配慮した配色作りに。
入力データはブラウザ内で処理されます
データはサーバーへ送信されません
変換ツール
カラーコントラストチェッカーとは？
文字色と背景色の組み合わせが、視覚障害のある方や高齢者を含む幅広いユーザーにとって読みやすいかどうかを、W3Cが定めるWCAG（Web Content Accessibility Guidelines）2.1の基準に基づいて判定する無料ツールです。
コントラスト比を計算し、通常テキスト・大きいテキストそれぞれについてAA・AAA基準への適合を一目で確認できます。デザインの初期段階で配色をチェックすることで、後からの手戻りを防げます。
使い方
- 「文字色」「背景色」それぞれにカラーコードを入力するか、色見本をクリックしてカラーピッカーで選択します。
- コントラスト比と、WCAG 2.1のAA・AAA基準（通常テキスト・大きいテキスト）への適合結果が自動表示されます。
- プレビューで実際の見え方を確認できます。
- 「⇄」ボタンで文字色と背景色を入れ替えられます。
よくある質問
WCAG 2.1のAAとAAAの違いは何ですか？
AAは最低限満たすべき基準、AAAはより厳格な基準です。通常テキストの場合、AAはコントラスト比4.5:1以上、AAAは7:1以上が必要です。多くのWebサイトはAA準拠を目標としています。
「大きいテキスト」とはどのくらいのサイズを指しますか？
WCAGでは18pt（約24px）以上の通常太さ、または14pt（約18.7px）以上の太字を「大きいテキスト」と定義しています。大きいテキストは小さい文字より視認性が高いため、基準が緩和されており、AAは3:1以上、AAAは4.5:1以上です。
コントラスト比はどのように計算されていますか？
WCAG 2.1で定義された相対輝度（relative luminance）の計算式に基づき、明るい色と暗い色の輝度から (L1 + 0.05) / (L2 + 0.05) の式でコントラスト比を算出しています。結果は1:1（同色）から21:1（黒と白）の範囲になります。
入力した色はサーバーに送信されますか？
いいえ。計算はすべてブラウザ内のJavaScriptで完結しており、外部への送信は一切行われません。