コンテンツへスキップ
FreeKitX

WCAG 2.2 カラーコントラスト適合性チェッカー - FreeKitX

ツールをブックマーク

このページをブラウザーに保存

スマートフォンでは、ブラウザーの共有またはメニューから「ブックマークに追加」を選んでください。

前景色と背景色からコントラスト比を計算し、WCAG 2.2のAA/AAA達成基準を判定。自動カラー補正機能付き。

コントラストチェッカーの準備が完了しました。カラーを指定してください。
無料・ローカル処理

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

カラー設定

定番のアクセシブル配色プリセット
コントラスト比高度なコントラスト (AAA基準合格)
14.63:1

W3C WCAG 2.2 公式算式 (L1 + 0.05) / (L2 + 0.05) に基づく相対輝度比。

通常テキスト✓ AA
大型テキスト✓ AA
非テキスト UI 要素✓ AA

WCAG 2.2 適合判定結果

通常テキスト

16px / 通常

本文や入力欄 (18pt / 24px 未満、または 14pt / 18.66px 太字未満)

レベル AA (>= 4.5:1)合格
レベル AAA (>= 7.0:1)合格

大型テキスト

>= 24px / 18.66px 太字

見出しや大型文字 (18pt / 24px 以上、または 14pt / 18.66px 太字以上)

レベル AA (>= 3.0:1)合格
レベル AAA (>= 4.5:1)合格

非テキスト UI 要素

SC 1.4.11

フォームの枠線、ボタン境界線、グラフィカルアイコン (WCAG 2.2 SC 1.4.11)

レベル AA (>= 3.0:1)合格
※ WCAG SC 1.4.11 は非テキストコントラストをレベル AA のみで定義しています(AAA 基準なし)。

リアルタイム表示プレビュー

通常本文タイポグラフィ (16px / Regular)

十分なコントラスト比を確保することは、アクセシブルなウェブデザインの基礎です。照明環境や視覚特性にかかわらず、すべてのユーザーに確実な可読性を提供します。

大型見出しタイポグラフィ (24px / Bold)

誰にでも見やすく明瞭なタイポグラフィデザイン

インタラクティブ UI コンポーネント (WCAG SC 1.4.11)
状態バッジ

スマート配色修正・改善提案アシスタント

合格基準に届かない場合、背景色または文字色を固定したまま、sRGB色域内で元の色調差(ΔE)を最小限に抑えながら目標比率をクリアする最適な色を自動算出します。

固定する対象
目標とする適合比率

現在の組み合わせは、すでに選択された目標コントラスト比を満たしています。 (14.63:1 >= 4.5:1)

直接の回答

カラーコントラストチェッカーは、W3C WCAG 2.2ガイドラインに準拠してテキスト色と背景色の相対輝度(Relative Luminance)を算出し、アクセシビリティ適合基準(AA・AAA)を即座に判定します。

このツールの使い方

1

前景色(テキスト色)と背景色を入力する

カラーピッカーまたはHEX/RGBコードから2つの色を指定します。

2

コントラスト比と合否基準を確認する

算出されたコントラスト比(例:4.5:1)と、通常テキスト・大テキスト・UI要素の適合状況を確認します。

3

自動修正サジェストを活用する

基準を満たさない場合、色味を保ったまま基準を満たす推奨カラーパレットをワンクリックで適用します。

相対輝度とWCAGコントラスト比の計算式

sRGB色空間のRGB値をガンマ補正して相対輝度Lを算出し、明るい方の輝度L1と暗い方の輝度L2の比率を求めます。WCAG 2.2では通常テキストで最低4.5:1(AA基準)、7:1(AAA基準)が求められます。

Contrast = (L1 + 0.05) / (L2 + 0.05)
  • WCAG 2.2 AA基準:通常の本文テキストで4.5:1以上、18pt以上または14pt太字の大きなテキストで3:1以上が必要です。
  • UIコンポーネント基準:フォームの境界線やグラフィカルな操作アイコンには最低3:1のコントラスト比が推奨されます。

具体例

白背景に対するネイビーブルーテキストのコントラスト評価

入力: 前景色:#1E3A8A、背景色:#FFFFFF

出力: コントラスト比:10.4:1(AA合格・AAA合格)

視覚障害を持つ方や屋外の直射日光下でも高い可読性が保証される優れた配色です。

制限事項

  • 単一の前景色と背景色の組み合わせを評価するツールであり、写真やグラデーション背景上のテキストは評価できません。
  • フォントの太さ(ウェイト)や字形の特性による主観的な読みやすさの違いまでは評価しません。

よくある質問

WCAG 2.2における「大きなテキスト」の定義は何ですか?

一般的に18pt(約24px)以上の通常フォント、または14pt(約18.66px)以上の太字(Bold)テキストが該当します。

色の自動修正機能はどのように色を選定していますか?

元の色相(Hue)と彩度(Saturation)を最大限に保持しながら、必要なコントラスト比を満たすまで輝度(明度)のみをアルゴリズム的に調整します。

信頼できる参考文献・標準規格