コントラストチェッカー

2色間のWCAGコントラスト比とAA/AAA合格を確認します。

入力した色の値はブラウザ内のローカルで処理され、サーバーにアップロードされることはありません。

カラーコードを扱っていますか? CSS Color Converter を試してください。

コントラストチェッカー について

このコントラストチェッカーは、任意の 2 色間の WCAG カラーコントラスト比を測定し、AA または AAA のアクセシビリティレベルに合格するかを即座に判定します。前景（テキスト）色と背景色を HEX または rgb/rgba で入力するか、組み込みのカラースウォッチで選ぶと、正確な比率に加え、通常テキストと大きいテキストの合否判定を計算します。アクセシブルなインターフェース、デザインシステム、マーケティングページを作る際に手早く色のコントラスト比を確認したい開発者、デザイナー、QA エンジニア向けに作られています。ライブプレビューが選んだ色でサンプルテキストを描画するので、可読性を一目で判断し、アクセシビリティのコントラスト問題を早期に発見できます。すべてはブラウザ内のローカルで動作するため、色の値は端末上で処理され、サーバーにアップロードされることはありません。

機能

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

  1. Foreground（テキスト）欄にテキスト色を入力するか、カラースウォッチで選びます。
  2. Background 欄に背景色を入力するか、そのスウォッチを使います。
  3. 判定バッジの上に表示されるコントラスト比を確認します。
  4. 通常テキストと大きいテキストの AA・AAA 合否バッジを確認します。

例

入力

Foreground (text): #777777
Background: #ffffff

出力

contrast ratio: 4.48
AA · normal text (4.5:1): Fail
AA · large text (3:1): Pass
AAA · normal text (7:1): Fail
AAA · large text (4.5:1): Fail

白地に中間グレーは、通常サイズの本文では AA をわずかに下回ります。

よくあるエラーとトラブルシューティング

よくある質問

コントラストチェッカーとは何で、なぜ WCAG 比率が重要なのですか?
コントラストチェッカーは 2 色を比較し、その間の WCAG コントラスト比を報告します。これはテキストの読みやすさを予測します。ArrayKit のコントラストチェッカーは正確な比率に加え AA と AAA の判定を表示するので、ロービジョンのユーザーにとってテキストが読みやすいことを確認できます。
WCAG に合格するにはどのコントラスト比が必要ですか?
WCAG AA は通常テキストで最低 4.5:1、大きいテキストで 3:1 を要求し、AAA は通常テキストで 7:1、大きいテキストで 4.5:1 を要求します。コントラストチェッカーは 4 つの判定を一度に表示します。
テキストと背景のコントラスト比を確認するには?
テキスト色を Foreground 欄に、背景色を Background 欄に（HEX・rgb・rgba で）入力するか、スウォッチを使います。入力に合わせてコントラストチェッカーが比率と AA/AAA バッジをライブ更新します。
3:1 のしきい値における大きいテキストとは何ですか?
大きいテキストは一般におよそ 18pt 以上、太字なら 14pt 以上です。それより小さいものは通常テキストとして扱われ、より高い 4.5:1 の比率を満たす必要があります。
コントラスト比は不透明度を考慮しますか?
いいえ。比率は不透明な RGB 値に基づくため、半透明の色はコントラストチェッカーで確認する前に、実際の背景に対して合成（フラット化）してください。
コントラストチェッカーに入力した色はどこかに送信されますか?
いいえ。コントラストチェッカーはすべてブラウザ内で動作するため、入力した色は端末に留まり、サーバーにアップロードされることはありません。

関連ツール

すべての ArrayKit ツール