✨ 無料・登録不要

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

テキストと背景色のコントラスト比をWCAG AA/AAA基準でリアルタイム判定

このツールをシェア

シェア送るシェア

テキスト色（前景色）

背景色

判定結果

—

コントラスト比

AA 通常テキスト

—

4.5:1 以上

AA 大テキスト

—

3:1 以上 (18px+ / 14px+ Bold)

AAA 通常テキスト

—

7:1 以上

AAA 大テキスト

—

4.5:1 以上

プレビュー

見出しテキストの例 (24px Bold)

通常テキストの例です。コントラスト比がアクセシビリティ基準を満たしているか確認できます。(16px Regular)

小さいテキストの例 (14px) — AA基準では注意が必要なサイズです。

このツールについて

WCAG基準に基づいてテキストと背景色のコントラスト比を検証できる無料ツールです。AA/AAAレベルの合否判定を自動で行い、アクセシブルなカラー選びをサポート。Web制作の必須ツールです。

♿

WCAG 2.1対応

AA（4.5:1）、AAA（7:1）基準で自動判定

👁

リアルタイム判定

色を変更すると即座にコントラスト比が更新

💡

改善提案

基準を満たさない場合に推奨色を提案

使い方

テキスト色を設定

カラーピッカーまたはHEX値でテキスト色を入力します。

背景色を設定

同様に背景色を設定します。

結果を確認

コントラスト比とWCAG AA/AAAの合否が即座に表示されます。

色を調整

基準を満たさない場合は、提案された色を参考に調整します。

よくある質問

WCAG AA と AAA の違いは？

AAは最低基準（通常テキスト4.5:1、大テキスト3:1）、AAAは推奨基準（通常テキスト7:1、大テキスト4.5:1）です。一般的にはAA基準を満たすことが求められます。

大テキストの基準は？

18px以上のボールド、または24px以上のテキストが大テキストに該当し、コントラスト比の基準が緩和されます。

グラデーション背景の場合は？

グラデーション背景の場合、最もコントラスト比が低い部分で基準を満たす必要があります。

ダークモードのチェックにも使えますか？

はい、テキスト色と背景色を入れ替えることで、ダークモードのコントラスト比も検証できます。