PixConvert

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

前景色と背景色の組み合わせが、WCAG 2.1 AAおよびAAAのアクセシビリティ基準に準拠しているか確認してください。

通常のテキスト

大きな文字（18pt / 14pt 太字）

The quick brown fox jumps over the lazy dog.

コントラスト比

17.40:1

WCAG AA — 標準テキスト (4.5:1)Pass (4.5:1)
WCAG AA — 大きな文字 (3:1)Pass (3:1)
WCAG AAA — 標準テキスト (7:1)Pass (7:1)
WCAG AAA — 大きな文字 (4.5:1)Pass (4.5:1)
WCAG AA — UIコンポーネント（3:1）Pass (3:1)

PixConvertコントラストチェッカーを使う理由

WCAG準拠チェックを1つのツールで実現 ― 色を選択するだけで、結果がすぐに表示されます。

WCAG 2.1準拠

関連するすべてのWCAG 2.1達成基準（AA標準、AA大、AAA標準、AAA大、およびUIコンポーネント）をチェックします。

ライブプレビュー

通常サイズ、大サイズ、およびUIコンポーネントサイズで、実際の背景色にレンダリングされたテキストをご覧ください。

カラーピッカー

ネイティブブラウザのカラーピッカーに加え、正確な色選択のための16進数入力機能を搭載。

正確な比率

ドキュメント作成のために、コントラスト比を小数点以下2桁まで正確に表示します（例：4.53:1）。

色を交換する

ワンクリックで前景と背景を入れ替えて、両方の組み合わせを瞬時に確認できます。

100%プライベート

ブラウザ内で計算される純粋なWCAG基準。サーバーもトラッキングも一切ありません。

色のコントラストを確認するタイミング

多くの地域では、アクセシビリティの確保は法的義務となっています。早めに確認しましょう。

デザインレビュー

Figmaデザインにおける色の選択がWCAGの要件を満たしていることを確認してから、エンジニアリング部門に引き渡してください。

  • プライマリーボタンの色を確認する
  • ブランド背景のテキストを確認する
  • プレースホルダーテキストの読みやすさをテストする

アクセシビリティ監査

法務レビューまたは品質レビューの一環として、既存のUIがWCAG 2.1 AAに準拠しているかどうかを監査する。

  • 不良な色の組み合わせを特定する
  • 文書のコントラスト比
  • 修正の優先順位を重要度順に付ける

デザインシステム

公開する前に、カラーパレット内のすべてのトークンについてアクセシビリティを検証してください。

  • 色のトークンペアを検証する
  • アクセシブルなテーマバリエーションを作成する
  • 文書準拠の組み合わせ

色のコントラストを確認する方法

1

カラーピッカーまたは16進数入力を使用して、テキストの色（前景色）と背景色を選択してください。

2

コントラスト比とWCAGの合否判定結果は即座に更新されます。逆の組み合わせを確認するには、スワップ機能を使用してください。

3

AAおよびAAA準拠レベルの結果を確認してください。すべての計算は公式のWCAG 2.1の計算式に従っており、ブラウザ内で完全に実行されます。

その他のツールを見る

このツールと併用すると非常に便利な他の無料ツールも見つけてみましょう。

utility

CSSグラデーションジェネレーター

カスタムCSSグラデーションを視覚的に構築する

Try it
utility

ボックスシャドウジェネレーター

ライブプレビュー付きでCSSのbox-shadowをデザイン

Try it
utility

カラーコンバーター

HEX、RGB、HSLカラーコードを瞬時に変換

Try it
utility

カラーパレット抽出ツール

あらゆる画像から主要な色を抽出する

Try it
utility

JSONフォーマッター

JSONを瞬時にフォーマット、検証、および圧縮します。

Try it
utility

正規表現テスター

正規表現をリアルタイムでテストおよびデバッグする

Try it

よくある質問

色のコントラストとアクセシビリティについて解説します。

WCAGのコントラスト比の要件は何ですか？

WCAG 2.1 レベル AA では、通常のテキストは 4.5:1、大きなテキスト (18pt 以上または 14pt 以上太字) は 3:1、UI コンポーネントおよびグラフィック オブジェクトは 3:1 の比率が求められます。レベル AAA では、通常のテキストは 7:1、大きなテキストは 4.5:1 の比率が求められます。

コントラスト比はどのように計算されるのですか？

コントラスト比 = (L1 + 0.05) / (L2 + 0.05)、ここでL1は明るい色の相対輝度、L2は暗い色の相対輝度です。輝度は、WCAG 2.1の式を使用して線形化されたsRGB値から計算されます。

「大きな文字」とは具体的にどのような文字を指しますか？

WCAGでは、大きなテキストを18pt（24px）以上、または太字の場合は14pt（約18.67px）以上と定義しています。大きなテキストは本質的に読みやすいため、コントラストの要件がより緩やかになります（4.5:1ではなく3:1）。

AAAの会員になる必要はありますか？

WCAGレベルAAは、ほとんどの法域における標準的な法的要件です（米国ではADA、EUではEN 301 549）。AAAはより高度な目標であり、最低限AAを目指し、重要なコンテンツについては可能な限りAAAを目指してください。

これは画像やグラデーションにも適用できますか？

このツールは単色の組み合わせをチェックします。画像やグラデーションの上にテキストを配置する場合は、最悪の場合の背景色（暗いテキストの場合はテキストの背後にある最も明るい点、明るいテキストの場合は最も暗い点）を評価する必要があります。WCAGでは、画像の背景がコントラスト基準を満たすことを義務付けていません。これは推奨される方法です。