コントラスト比レターグレード
色の組み合わせのコントラストを、レビューにそのまま書ける1文字で表します。白地に#111827は17.74対1で、Aは12対1から始まるため評価はAです。評価はAからEまであり、それ未満は不合格です。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 前景色
- #111827
- 背景
- #ffffff
- コントラスト比
- 17.74
- 成績
- A
- 評価ラベル
- Excellent
- 下限値
- 12
このコントラスト比レターグレードツールは、前景と背景の2つの16進カラーを受け取り、公式のWCAG 2.xコントラスト比を計算し、AからE、さらにfailまでの固定レター尺度に写像します。エンジンは相対輝度に従います。各sRGBチャネルを線形化し、輝度を係数0.2126、0.7152、0.0722で重み付けし、比は(明るい側+0.05)÷(暗い側+0.05)です。帯域は決定的です。 Aは12対1以上、Bは7(通常テキストAAA)、Cは4.5(通常テキストAA)、Dは3(大きいテキストAA)、Eは2、それ未満はfailです。結果はネットワーク、乱数、時計に依存しません。
コントラストのレターグレードの意味と応答の内容
コントラストのレターグレードは、連続的なWCAGコントラスト比を短い序数ラベルに圧縮し、関係者が閾値表を暗記しなくても走査できるようにします。グレードAは少なくとも12対1に達することを意味し、通常テキストのAAAを大きく上回り、純黒対純白を除けば読みやすいsRGBペアの実用的上限に近いです。グレードBは少なくとも7対1で、通常テキストのAAA閾値です。
グレードCは少なくとも4.5対1で、本文のよく知られたAA閾値です。グレードDは少なくとも3対1で、大きいテキストのAAは満たしますが、同じ指針のもとでは小さな本文には弱すぎます。グレードEは少なくとも2対1で、輝度差は残りますがWCAGのテキストコントラスト基準はすべて不合格です。
グレードfailは2対1未満(同一色の1対1を含む)を意味し、その面では意味のあるテキストやアイコンに使うべきではありません。ページクロール、不透明度合成、グラデーション標本はありません。明示的な2つのhexを渡すと、チケット、デザイントークン、自動ゲート向けの再現可能な評点が得られます。
デザインシステム、レビュー、CIでのレターグレードの位置づけ
プロダクトチームは、完全なAA/AAA行列が表の1列やステータスバッジには広すぎるとき、ダッシュボードやデザインレビュー用チェックリスト向けに1文字のスコアをしばしば必要とします。QAとアクセシビリティ専門家は評点と数値比をバグ報告に添付し、スクリーンショットからの推測ではなく正確なペアを直せるようにします。
コンテンツとマーケティングは、キャンペーンhexがサイトの明暗背景でも少なくともCを取れるかを確認します。真偽の準拠フラグが必要なときは完全なAA/AAA行列チェッカーと、採点前にRGBやHSLからhexを得る必要があるときは色変換ユーティリティと組み合わせてください。
活用例
デザイントークンのスコアカード
ブランドパレットの前景/背景ペアを、明暗テーマのトークン確定前に1文字で採点します。
よくある質問
レターグレードはコントラスト比からどう対応付けられますか?
A ≥ 12、B ≥ 7(通常AAA)、C ≥ 4.5(通常AA)、D ≥ 3(大きいAA)、E ≥ 2、2未満はfail。帯域は丸め前のWCAG比を用い、表示比は小数2桁に丸めます。
受け付ける色形式は?
hexのみ:#RGBまたは#RRGGBB、先頭#の有無は任意、大文字小文字は不問。
WCAG AA/AAAコントラストチェッカーとの違いは?
AA/AAAチェッカーは通常・大きいテキストの合否真偽を返します。本ツールは同じWCAG比をスコアカードやバッジ向けのA–E/failレター尺度に写像します。
このツールは自分のウェブサイトを走査しますか?
いいえ。ページを巡回したりスタイルを読み取ったりはしません。文字色と背景色の2色を指定すると、その組み合わせの比率と評価だけを返します。
評価Eはどういう意味ですか?
少なくとも二対一の比率があり、明るさの差は多少残るものの、WCAGの文字コントラストの基準はすべて満たさないという意味です。それより低いと不合格になります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/contrast-grade \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"foreground":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/contrast-grade", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"foreground": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/contrast-grade",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"foreground": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/contrast-grade", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"foreground":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"foreground":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/contrast-grade", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"foreground": "#111827",
"background": "#ffffff"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.contrast_grade",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
デザイナー、開発者、アクセシビリティレビュー担当者は、生の比やAA/AAAの真偽値だけでなく、デザインレビュー、トークン表、プルリクエスト要約に載せられる1文字をしばしば必要とします。パレット検討やデザイントークンには無料のブラウザ経路を、CIやデザインシステムで毎回同じ評点行列が必要なときは成功リクエストごとに$0.002のAPIをご利用ください。
コントラストのレターグレードの意味と応答の内容
応答は各色を正規化した小文字の#rrggbbとrgb(r, g, b)文字列で返し、表示用に小数2桁へ丸めたcontrast_ratio、gradeとgrade_labelの文字列、勝ち帯域の数値下限band_min、methodとしてwcag_contrast_letter_gradeを付与し、純AA/AAAチェッカーのランディングと区別できるようにします。不正なhex、欠落フィールド、非文字列、長すぎる文字列はinvalid_inputとなり課金されません。
入力契約、hex解析、再現可能な帯域ロジック
両値はhexで、先頭の#は任意、3桁は6桁に展開(#abcは#aabbcc)、または6桁全文、大文字小文字は区別しません。各色は32文字までで、検証を安価に保ち長いCSSの誤貼り付けを防ぎます。解析後、チャネルはWCAGの区分的sRGB曲線で線形化されます。0.04045以下なら12.92で割り、それ以外は((c+0.055)/1.055)を2.4乗し、相対輝度に合成します。評点は丸め前の浮動小数比から選ばれるため、表示が6.99でも真の比が7未満なら帯域Bを主張できません。テキストまたはアイコン色にはforeground、背後の面にはbackgroundを持つJSONオブジェクトを送信してください。別名fg、color1、text、hex1は第1色、bg、color2、hex2は第2色に対応し、フォームや表計算で列名を保てます。アルファ接尾辞、rgb()、hsl()、名前付きCSS色、素の整数は、フィールド名と受信内容を示すメッセージで拒否されます。帯域はコード内の固定定数で、リクエストごとに尺度を変える設定はありません。
デザインシステム、レビュー、CIでのレターグレードの位置づけ
デザイナーはFigmaやトークンJSONからhexペアを貼り付け、明暗テーマのスケールを確定する前にAからfailまで読みます。エンジニアは同じ契約をプルリクエスト検査に配線し、本文の主要テキストがグレードC未満ならトークン変更を止め、大きい見出しがDに落ちたら警告します。このページでは作業はすべてブラウザ内で行われ、APIでは成功した照会ごとに$0.002、失敗した検証は課金されず、応答後は何も保存されません。無料の対話的探索と同一の有料APIという分割は、KITのtier Aカタログの他項目と揃っています。
連携の活用例
プルリクエストのコントラストバッジ
CIからAPIを呼び、本文の主要hexペアがグレードC(通常テキストAA帯)未満ならビルドを失敗させます。
アクセシビリティレビューの要約
チケットにgrade、grade_label、contrast_ratioを添付し、レビュー担当とエンジニアが短い評点と数値比を共有します。
技術的な質問
コントラスト比レターグレードツールの料金は?
このページではブラウザで無料です。APIでは成功リクエストが$0.002、無効な入力は課金されません。
このツールはサイトのコントラスト問題を走査しますか?
いいえ。指定した2つのhexのみを採点します。ライブページ監査には専用のアクセシビリティスキャナを使い、本エンドポイントは2色のレターグレードの問いに答えます。