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

文字色と背景色のコントラスト比をWCAG 2.1の計算式でリアルタイムに表示し、通常の文字と大きな文字それぞれでAA・AAAの適合・不適合を判定するコントラストチェッカーです。基準を満たさない場合は、同じ色相のまま基準を満たす最も近い色を提案するので、デザインの印象を変えずに修正できます。

使い方

1. 大きなカラー見本をタップしてカラーピッカーを開くか、スポイトで画面上の色を取得するか、各欄に直接入力します。
2. どの欄にも、ページのどこにでも、CSSの色（#hex、rgb()、hsl()、hwb()、oklch()、lab()、色名など）を貼り付けられます。
3. 各形式の横のコピーボタンでコピーします。不透明度のスライダーで透明度を加えられます。
4. パレットの色をタップすると現在の色になり、長押し（または右クリック）でHEXをコピーします。コントラストタブでは文字色と背景色を設定し、基準を満たさないときは提案をタップして修正できます。

• WCAG 2.1では通常の文字に4.5:1（AA）、AAAには7:1が必要です。大きな文字（24px、または太字18.66px）はAAで3:1、AAAで4.5:1。UI部品や図形は3:1が必要です。
• 提案は色相と彩度を保ったまま、明度（OKLCH）だけを変えて基準を満たす最も近い色を探します。
• 半透明の色は背景と合成してからコントラスト比を計算します。
• CMYKは簡易的な変換です。印刷には印刷所のカラープロファイルを使ってください。
• 最近使った色はこのブラウザ内にのみ保存されます。

WCAGの基準値

WCAG 2.1では、通常の文字はコントラスト比4.5:1以上（レベルAA）、レベルAAAでは7:1以上が求められます。大きな文字（24px以上、または太字18.66px以上）はAAで3:1、AAAで4.5:1です。入力欄の枠やアイコンなど、意味を持つUI部品や図には3:1が必要です。

コントラスト比は1:1（同じ色）から21:1（白地に黒）までの値になります。

コントラスト比の計算方法

それぞれの色を相対輝度に変換します。sRGBの各チャンネルを線形化し、赤0.2126、緑0.7152、青0.0722の重みで足し合わせます。比は（L1 + 0.05）/（L2 + 0.05）で、明るいほうの色を分子にします。白地にグレー#767676なら4.54:1でぎりぎりAAに適合し、#777777だと4.48:1で不適合です。境目はこれほど微妙なこともあります。半透明の色は先に背景と合成してから計算します。

基準を満たさない組み合わせの直し方

提案される色は、色相と彩度はそのままにOKLCHの明度だけを変え、基準を満たす最も近い値にします。たいていは文字色を暗くするのがいちばん目立たない修正です。コントラストはアクセシビリティの一部にすぎず、文字の太さ、大きさ、行間なども大切です。

よくある質問