WCAG コントラスト比チェッカー
前景色（文字色）と背景色を入力すると、WCAG 2.1 のコントラスト比と、通常テキスト・大文字テキスト・UI部品それぞれの AA / AAA 合否を判定します。
使い方とAIOクエリ例
Webサイトの文字色と背景色のコントラストがWCAG 2.1のAA/AAA基準を満たすかを確認できます。判定はブラウザ内だけで処理します。
- URLクエリ例:
contrast_ratio_checker.html?fg=%23767676&bg=%23ffffff&format=json - rgb() 表記も使えます:
contrast_ratio_checker.html?fg=rgb(118,118,118)&bg=%23ffffff&format=json format=jsonは比率・相対輝度・各レベル合否を含む機械可読JSON、format=rawはコントラスト比（例 4.54:1）だけを返します。
コントラスト比チェッカーは、前景色（文字色）と背景色の2色から、WCAG 2.1（ウェブアクセシビリティ基準）で定義されたコントラスト比を計算し、可読性が基準を満たすかどうかを判定するツールです。各色をsRGBの相対輝度に変換し、(明るい方の輝度+0.05)÷(暗い方の輝度+0.05)という規格どおりの式で比率を求めます。結果は「通常テキスト」「大文字テキスト」「UI部品・グラフィック」の3区分について、それぞれAA・AAAレベルの合否として表示します。入力はHEX（#RRGGBB / #RGB）とrgb(r,g,b)の両方に対応し、カラーピッカーからも指定できます。計算はすべてブラウザ内で完結し、色の値が外部へ送信されることはありません。デザインレビューやアクセシビリティ検証を、その場で素早く行いたいときに使えます。
使い方・サンプル・結果例・注意点
使い方
前景色（文字色）と背景色を、それぞれの入力欄にHEXまたはrgb()で入力するか、右側のカラーピッカーで選びます。「判定」ボタンを押すと、コントラスト比（例: 4.54:1）と、通常テキスト・大文字テキスト・UI部品それぞれのAA/AAA合否、2色の相対輝度が表示されます。プレビュー欄では実際の見え方を確認でき、「前景⇄背景」で2色を入れ替えられます（コントラスト比は入れ替えても変わりません）。
サンプル入力
前景色 #767676 / 背景色 #ffffff
結果例
前景色 #767676（グレー）を背景色 #ffffff（白）に重ねると、コントラスト比は 4.54:1 です。通常テキストのAA（4.5:1以上）は合格、AAA（7:1以上）は不合格。大文字テキストはAA（3:1以上）・AAA（4.5:1以上）ともに合格。UI部品・図形（3:1以上）も合格、と各区分の合否が一覧で表示されます。
注意点
コントラスト比は 1:1（同色）から 21:1（黒と白）の範囲を取り、値が大きいほど読みやすくなります。判定はWCAG 2.1のレベルAA/AAAに基づきます。通常テキストはAAで4.5:1・AAAで7:1、大文字テキスト（およそ18ptまたは14pt太字＝24px/約18.66px以上）はAAで3:1・AAAで4.5:1、UI部品や図形はAAで3:1が基準です。本ツールは表示上のブレをなくすため、コントラスト比を小数第2位に丸めた値で合否を判定します。半透明（アルファ付き）の色は不透明として扱い、合成後の色は考慮しません。WCAG 3.0で検討されているAPCA（知覚的コントラスト）には対応していません。すべての計算はブラウザ内で行い、入力した色は外部へ送信されません。
こんなときに使えます
- Webデザイナーが、文字色と背景色の組み合わせがWCAG AAを満たすかを配色決定の前に確認する
- フロントエンド開発者が、ボタンやフォームの枠線・アイコン（UI部品）のコントラストが3:1以上あるかを検証する
- アクセシビリティ担当者が、JIS X 8341-3（高齢者・障害者配慮設計）対応のレビューで合否の根拠となる比率を数値で記録する
- 資料・スライド作成者が、投影時に読みづらい薄い文字色を避けるため、白背景での見やすい色を選ぶ
よくある質問
コントラスト比はどのように計算していますか？
各色をsRGBの相対輝度Lに変換し、(L_明るい方+0.05)÷(L_暗い方+0.05)で求めています。相対輝度はWCAG 2.1の定義どおり、各チャンネルをガンマ補正（sRGBの逆変換）した上で 0.2126R+0.7152G+0.0722B で算出します。この式は前景・背景のどちらを明るい側にしても同じ値になります。
AA と AAA、通常テキストと大文字テキストの違いは何ですか？
AAは達成すべき標準レベル、AAAはより高い目標レベルです。通常テキストはAAで4.5:1・AAAで7:1が必要です。大文字テキスト（およそ18pt=24px以上、または14pt=約18.66px以上の太字）は文字が大きく読みやすいため、AAで3:1・AAAで4.5:1と基準が緩和されます。
UI部品の 3:1 とは何が対象ですか？
WCAG 2.1の達成基準1.4.11「非テキストのコントラスト」に相当し、ボタンの枠線・フォームの境界線・状態を示すアイコンなど、意味を伝えるグラフィック要素が対象です。これらは隣接する色に対して3:1以上が求められます。装飾だけの要素や、他の視覚的手がかりがある場合は対象外です。
rgb() 表記や3桁のHEXも入力できますか？
できます。#RRGGBB、3桁の#RGB（例 #777）、rgb(118,118,118) のいずれも受け付けます。rgba()のようにアルファ値が付いていても、アルファは無視して不透明色として計算します。半透明を背景と合成した実際の見え方の判定には対応していません。
このツールの判定はWebAIMなど他ツールと同じ結果になりますか？
はい。WCAG 2.1の相対輝度・コントラスト比の式は一意に定義されているため、同じ2色なら基本的に同じ比率になります。ごくわずかな差は小数の丸め方の違いによるもので、本ツールは小数第2位に丸めた値で合否を判定します。なお、WCAG 3.0で検討中のAPCAは計算方法が異なるため、本ツールの値とは一致しません。
入力した色はサーバーに送信されますか？
送信しません。色の解析・輝度計算・合否判定はすべてブラウザ内のJavaScriptで処理し、入力値が外部へ送られることはありません。