ColourPicker.app

コントラストチェッカー – WCAGコントラスト比

前景色と背景色を入力して、コントラスト比を確認し、その組み合わせがWCAG AAおよびAAAのアクセシビリティ基準を満たしているかどうかをご確認ください。

2つの色を入力してコントラストを確認

HEX、RGB、HSL、OKLCH形式に対応

例を試す

その他のツール

Picker

カラーピッカー

画像をアップロードしてクリックするだけで、HEX、RGB、HSLカラーコードを抽出できます。

HEXRGBHSLImage

Converter

カラーコンバーター

HEX、RGB、HSL間で色を即座に変換します。

HEXRGBHSL

Generator

パレットジェネレーター

任意のベースカラーから調和のとれたカラーパレットを生成します。

HarmonyHSLHEX

アクセシビリティのための色コントラストチェック

色のコントラストは可読性にとって極めて重要です。前景のテキストと背景のコントラストが不十分な場合、読みにくくなります。特にロービジョンの方や色覚に特性がある方にとっては顕著です。

このコントラストチェッカーは、任意の2色間のコントラスト比を計算し、WCAG 2.1の達成基準に基づいて評価します。HEX、RGB、HSL形式で色を入力すると、即座に結果が表示されます。

WCAGコントラストレベルの理解

ウェブコンテンツ・アクセシビリティ・ガイドライン（WCAG）は、テキストの可読性のための最低コントラスト比を定義しています。2つの適合レベルがあります：

  • WCAG AA 通常テキスト — 4.5:1以上のコントラスト比が必要
  • WCAG AA 大きなテキスト — 3:1以上のコントラスト比が必要（大きなテキストとは18pt以上、または14pt以上の太字）
  • WCAG AAA 通常テキスト — 7:1以上のコントラスト比が必要
  • WCAG AAA 大きなテキスト — 4.5:1以上のコントラスト比が必要

AAはほとんどのウェブサイトやアプリが目指す標準レベルです。AAAは、最大限の可読性が重要な場合に推奨される強化レベルです。

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

  1. 前景色（テキスト色）を入力 — HEX、RGB、またはHSL
  2. 対応する形式で背景色を入力
  3. コントラスト比と、背景上のテキストのライブプレビューを確認
  4. WCAG AAおよびAAAレベルの合格/不合格結果を確認
  5. スワップボタンを使って前景色と背景色をすばやく入れ替え

色のコントラストをチェックすべきタイミング

  • ウェブサイトやアプリのテキスト色と背景色を選ぶとき
  • デザインシステムがアクセシビリティ要件を満たしているか確認するとき
  • ボタン、リンク、アイコンの色を背景に対してテストするとき
  • ダークモードの色の組み合わせをチェックするとき
  • 法的なアクセシビリティ基準（ADA、EAA、Section 508）を満たす必要があるとき

正確・即時・無料

このツールは、標準的な相対輝度の計算式を使用してWCAG 2.1コントラスト比を計算します。結果はブラウザ内で即座に計算され、データがサーバーに送信されることはありません。

先に色を見つけたり変換したりする必要がありますか？カラーピッカーで画像から色を抽出したり、カラーコンバーターでHEX、RGB、HSL間の変換ができます。

よくある質問

テキストに適したコントラスト比はどのくらいですか？
通常サイズの本文テキストの場合、WCAG AAを満たすには4.5:1以上のコントラスト比が必要です。大きなテキスト（18pt以上、または14pt以上の太字）の場合、最低値は3:1です。最高レベルのアクセシビリティ（WCAG AAA）の場合、通常テキストには7:1以上が必要です。
WCAG AAとAAAの違いは何ですか？
AAはほとんどのウェブサイトやアプリが満たすべき標準的な適合レベルです。AAAはより厳格なコントラスト要件を持つ強化レベルで、政府機関や医療関連のウェブサイトなど、最大限の可読性が重要なコンテンツに推奨されます。
WCAGにおける「大きなテキスト」とは何ですか？
大きなテキストとは、通常の太さで18ポイント（24px）以上、または太字で14ポイント（約18.66px）以上のテキストと定義されています。大きなテキストはサイズにより元々読みやすいため、コントラスト要件が低く設定されています。
このチェッカーはどのカラー形式に対応していますか？
HEX（例：#1E293B）、RGB（例：rgb(30, 41, 59)）、HSL（例：hsl(222, 33%, 17%)）形式で色を入力できます。ツールが形式を自動検出します。
コントラスト比はどのように計算されますか？
コントラスト比はWCAG 2.1の公式 (L1 + 0.05) / (L2 + 0.05) で計算されます。L1は明るい方の色の相対輝度、L2は暗い方の色の相対輝度です。結果は1:1（コントラストなし）から21:1（最大コントラスト、白地に黒）の範囲になります。
このツールはモバイルでも使えますか？
はい。コントラストチェッカーはモダンブラウザを搭載したあらゆるデバイスで動作します — デスクトップ、タブレット、スマートフォンに対応しています。
このツールは無料ですか？
はい。ColourPicker.appは登録不要で完全に無料でお使いいただけます。
テキストだけでなくUIコンポーネントのコントラストもチェックできますか？
WCAG 2.1では、意味のあるUIコンポーネントやグラフィカルオブジェクトにも最低3:1のコントラスト比が求められています（達成基準1.4.11）。このチェッカーを使ってそれらの組み合わせも確認できます。比率の計算方法は同じです。