コントラストチェッカー: WCAG 比率と AA/AAA を即判定

任意の 2 色について WCAG コントラスト比を計算し、AA/AAA の合否を表示するコントラストチェッカー。

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

開発・運営：Udit Agarwal

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

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

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

機能

• 2 色間の正確な WCAG 2.x コントラスト比を計算
• HEX（3 桁または 6 桁）・rgb()・rgba() の色形式を受け付け
• 通常テキスト（4.5:1）と大きいテキスト（3:1）の AA 合否を表示
• 通常テキスト（7:1）と大きいテキスト（4.5:1）の AAA 合否を表示
• 前景・背景両方のネイティブカラーピッカースウォッチ
• 選んだ色でサンプルテキストを描画するライブプレビュー
• 色の値を解析できないときは明確な検証メッセージ

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

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 をわずかに下回ります。

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

• 「red」や「rebeccapurple」のような CSS カラー名を貼り付けると無効な色エラーになる。 — 名前付きの色ではなく、HEX 値（例: #ff0000）または rgb()/rgba() を使ってください。
• アルファ付き 8 桁 HEX（#rrggbbaa）が無効な色として拒否される。 — アルファチャンネルを外して 6 桁 HEX を入力してください。このチェッカーは不透明な色のみを読み取ります。
• AA 大は合格だが AA 通常は不合格で、どちらが当てはまるか分からない。 — 大きいテキストはおよそ 18pt 以上（または 14pt 以上の太字）を指します。本文はより厳しい 4.5:1 の通常しきい値を満たす必要があります。
• rgba() のアルファ値がコントラスト比を変えない。 — 比率は RGB チャンネルのみで計算されるため、チェック前に透明度を実際の背景色に対して合成（フラット化）してください。

よくある質問

コントラストチェッカーとは何で、なぜ 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 値に基づくため、半透明の色はコントラストチェッカーで確認する前に、実際の背景に対して合成（フラット化）してください。

コントラストチェッカーに入力した色はどこかに送信されますか?

いいえ。コントラストチェッカーはすべてブラウザ内で動作するため、入力した色は端末に留まり、サーバーにアップロードされることはありません。

関連ツール

• CSS カラー変換 — HEX、RGB、HSL 間で変換し、ライブスウォッチを表示します。
• CSS / SCSS フォーマッター — CSS/SCSS/LESS の整形・圧縮、プロパティの並べ替え、重複の除去を行います。
• SVG オプティマイザー — SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。
• HTML フォーマッター — HTMLの整形・圧縮、インラインCSS/JSの整形、結果のプレビューを行います。
• 画像オプティマイザー — 画像を再エンコードして軽量化（JPEG/WebP/PNG）、任意でリサイズします。
• Open Graph ジェネレーター — Open GraphとTwitterのメタタグを生成し、ソーシャルカードをプレビューします。
• Markdown プレビュー — MarkdownをHTMLにレンダリングし、ライブプレビューします。

コードフォーマッターの他のツール

• Mermaid 図レンダラー — Mermaid図（フロー、シーケンス、ガント）をブラウザ内でSVGにレンダリングします。
• SVG オプティマイザー — SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。
• MongoDB クエリ整形ツール — MongoDB のクエリや find() 文をブラウザ内で整形・インデントします。
• MongoDB 集計整形ツール — MongoDB の集計パイプラインをブラウザ内で整形・インデントします。
• MongoDB エクスプローラー — MongoDB のドキュメントやコレクションのサンプルを調べ、フィールドのスキーマと型を推測します。
• OpenAPI / Swagger フォーマッター — OpenAPI / Swagger 仕様（JSON または YAML）を整形・検証し、パスと操作の数を数えます。
• CSS単位変換ツール — px・rem・em・pt・% をリアルタイムに相互変換します。
• glob to regex 変換ツール — globパターンをJavaScriptのregexに変換し、パスでテストできます。
• HTML to Markdown 変換ツール — HTMLをきれいで読みやすいMarkdownに変換します。
• TOML 整形・変換ツール — TOMLを整形・検証し、JSONと相互変換します。
• logfmt to JSON コンバーター — logfmt の key=value ログを JSON に、また JSON から logfmt に変換します。
• dotenv から JSON への変換 — .env ファイルを JSON オブジェクトに、JSON を .env に相互変換できます。

コードフォーマッターのツールをすべて見る (32) · すべてのツール