ForHosting KIT · 画像の編集・解析

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

Q: このツールは自分のウェブサイトのコントラスト問題をスキャンしますか?

いいえ。 指定した2つの16進数カラーを比較するだけです。実際のページ監査には専用のアクセシビリティスキャナーをお使いください。

文字が背景の上でWCAGの基準を満たして読めるかが分かります。白地に#111827なら17.74対1で、通常の文字でも大きな文字でもAAとAAAに合格します。アクセシビリティの課題票にそのまま書ける数値です。ブラウザで無料で使えます。

無料
ブラウザで動作
登録不要
データは端末の外に出ません

無料で実行 API仕様を見る

ご利用方法ウェブAPIメールTelegramアプリ近日

計算例

入力した場合

前景色: #111827
背景色: #ffffff

結果

コントラスト比: 17.74

このWCAGコントラスト比チェッカーは、前景色と背景色の2つの16進数カラーを受け取り、ウェブコンテンツアクセシビリティガイドラインが定める公式のコントラスト比を、通常テキストと大きいテキストそれぞれのAA・AAA合否フラグとともに返します。デザイナー、開発者、監査担当者はこの比率を使い、本文、ボタン、ラベル、UIの各要素が弱視や色覚特性を持つ人にも読みやすいかを判断します。エンジンはWCAG 2.xの相対輝度計算式に従います。各16進数チャンネルをsRGBから線形化し、標準の0.2126、0.7152、0.0722という係数で輝度を加重し、コントラスト比は(明るい方の輝度+0.05)を(暗い方の輝度+0.05)で割った値として算出します。しきい値は丸めません。通常テキストはAAで4.5以上、AAAで7以上が必要です。大きいテキストはAAで3以上、AAAで4.5以上が必要です。結果はネットワーク呼び出しやサンプリング、日付依存のショートカットを一切使わない決定的な値です。パレットのレビューやデザイントークンにはブラウザで無料でお使いいただけます。

コントラスト比で分かること

コントラスト比は、単純なRGBの距離ではなく人間の輝度知覚を踏まえて、テキストが背景からどれだけ際立って見えるかをWCAGが表す唯一の数値です。純粋な黒と純粋な白の組み合わせは21対1という不透明sRGBカラーの理論上の最大値に達し、同一色同士は1対1となりテキストのすべての基準に不合格となります。

WCAGにおける大きいテキストとは、少なくとも18ポイントの標準体、または14ポイントの太字相当を指します。本ツール自体はフォントサイズを測定せず、大きいテキスト用のしきい値を適用するだけなので、この結果をご自身のタイプスケールに当てはめてください。ページのクロール、CSS解析、不透明度の合成、グラデーションのサンプリングは一切行いません。

2つの明示的な16進数カラーを渡すだけで、デザイントークンのCI、Figmaプラグインのバックエンド、スクリーンショットの印象ではなく数値の比率を根拠にすべきチケットのコメントに適した、再現性のある結果が得られます。サイト全体の監査が必要な場合は、より広範なアクセシビリティスキャナーと組み合わせてください。

16進数入力の読み取り方とAA・AAAの再現性

両方の値は16進数でなければなりません。先頭の#は任意で、6桁に展開される3桁(#abcは#aabbccになります)または6桁のいずれかを、大文字小文字を区別せず受け付けます。各色は検証コストを抑え貼り付けミスを防ぐため32文字までに制限されています。

解析後、各チャンネルはWCAGの区分的sRGB曲線で線形化されます。0.04045未満なら12.92で割り、それ以外は((c+0.055)を1.055で割った値)を2.4乗し、それらを組み合わせて相対輝度を求めます。

比率は分子に明るい方の輝度を使い、合否フラグは丸めていない浮動小数点の比率を4.5、7.0、3.0と比較するため、表示上の4.50が本当は不合格になるべき4.499を隠すことはありません。

コントラストチェックが活きるデザインシステム・UIレビュー・CI

プロダクトチームがコントラスト要件に直面するのは、ブランドパレットがマーケティングのスライドでは美しく見えても白いカード上の本文では不合格になるとき、ライトモードのトークンからダークモードのテーマを生成したとき、あるいは公開前に法務やコンプライアンスの担当者から文書化されたAAの証拠を求められたときです。

QAやアクセシビリティ専門家は、バグ報告に数値の比率を記載することで、開発者がスクリーンショットからの推測ではなく正確なペアを修正できるようにします。コンテンツやマーケティングのチームは、キャンペーン用の16進数コードがサイトの明るい背景と暗い背景の両方で合格するかを確認します。このページ上ではすべての処理がブラウザ内で完結します。

RGBやHSLの中間値が必要な場合は色変換ツールと、実際のマークアップをスキャンする必要がある場合はページ全体のアクセシビリティ監査と組み合わせてください。

活用例

デザイントークンとパレットのレビュー

ライトテーマとダークテーマ用のトークンを確定する前に、ブランドパレット内のすべての前景/背景のペアをAA・AAAで確認します。

アクセシビリティのバグ報告

あいまいなスクリーンショットではなく、開発者が正確な16進数ペアを修正できるよう、数値のコントラスト比とAA/AAAのマトリクスをチケットに添付します。

よくある質問

どの色形式に対応していますか?

16進数のみです:先頭の#の有無を問わず#RGBまたは#RRGGBB形式で、大文字小文字は区別しません。

ここで使われるAA・AAAのしきい値は?

通常テキスト:AAは4.5以上、AAAは7以上。大きいテキスト:AAは3以上、AAAは4.5以上。合否判定は丸めていない比率を使い、表示上の比率は小数点以下2桁に丸められます。

このツールは自分のウェブサイトのコントラスト問題をスキャンしますか?

いいえ。指定した2つの16進数カラーを比較するだけです。実際のページ監査には専用のアクセシビリティスキャナーをお使いください。

見た目は問題なさそうなのに、なぜAAが不合格になるのですか?

人間の知覚には個人差があり、周囲の光環境も異なります。WCAGは知覚的な鮮やかさではなく、線形化したsRGBに基づく相対輝度を使います。コンプライアンス確認では数値の比率を信頼し、マトリクスが合格するまで16進数の値を調整してください。

コントラスト比の最大値はいくつですか？

純粋な白地に純粋な黒で二十一対一となり、画面上の不透明な色ではこれが最大です。同じ色同士なら一対一で、文字に関するすべての基準で不合格になります。

開発者向け — APIアクセス

このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。

エンドポイント

POSThttps://api.kit.forhosting.com/color/contrast

Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。

お使いのスタックから呼び出す

curl -X POST https://api.kit.forhosting.com/color/contrast \
  -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", {
  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",
    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", 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", 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",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。

料金

1リクエストあたり$0.002

単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。

制限

max_color_chars 32

エラー

HTTP	コード	意味
`401`	`unauthorized`	APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。
`402`	`insufficient_balance`	残高が不足しています。チャージ後に再度お試しください。
`404`	`unknown_type`	指定されたタスクタイプは存在しません。タイプ名を確認してください。
`429`	`rate_limited`	リクエストが多すぎます。しばらく待ってから再度お試しください。

技術的な注記

CI、デザインシステム、自動アクセシビリティゲートで同じ結果が必要な場合は、リクエストが成功するごとに$0.002でAPIをお使いください。

WCAGコントラスト比が測るものとレスポンスの内容

このチェッカーは各入力の16進数を正規の小文字#rrggbb形式とrgb(r, g, b)表記に正規化し、表示用に小数点以下2桁に丸めたcontrast_ratioと、normal_textおよびlarge_textの各枝にそれぞれbooleanのaaとaaaフィールドを持つwcagオブジェクトを返します。methodタグのwcag_relative_luminanceは、この経路が知覚的なdelta-EやAPCAの実験値ではなく、公表された相対輝度計算式であることを示します。無効な16進数コード、欠落フィールド、文字列以外の値、長すぎる文字列はinvalid_inputとして拒否され、課金されることはありません。このページは2色間の問い合わせにのみ、人間にも機械にも扱いやすい安定したJSONで答えます。

16進数入力の読み取り方とAA・AAAの再現性

優先されるフィールドは、テキストやアイコンの色を表すforegroundと、その背後の面を表すbackgroundですが、最初の色にはfg、color1、text、hex1、2番目の色にはbg、color2、hex2という別名も受け付けるため、フォームやクエリ文字列、スプレッドシートで列名を変えずに同じ契約を再利用できます。アルファ接尾辞、rgb()関数、hsl()関数、CSSの色名、裸の整数は、どのフィールドで何を受け取ったかを示すメッセージとともに拒否されるため、不正なトークンが黙って通過することはありません。デザインシステムのパイプラインで輝度計算を各言語で再実装せずに同一の数学的結果が必要な場合は、このページの無料ブラウザチェックと有料APIを組み合わせてください。

コントラストチェックが活きるデザインシステム・UIレビュー・CI

デザイナーはFigmaやトークンのJSONファイルから16進数のペアを貼り付け、色スケールを確定する前にAA・AAAのマトリクスを確認できます。エンジニアは、主要な本文色の通常テキストAAが4.5を下回った場合にトークンの変更をブロックするプルリクエストのチェックに同じ契約を組み込んだり、あえて背景に近づけた見出し用の大きいテキストAAA判定をログに残したりします。APIでは成功した照会1件ごとに$0.002が課金され、検証に失敗した場合は課金されず、レスポンスを返した後は何も保存されません。この無料の対話的な検証と同一結果を返す有料APIという組み合わせは、KITのtier-Aカタログ全体の方針と一致しており、数学的な結果を変えることなくパレットのワークショップから自動パイプラインへ移行できます。

連携の活用例

UIカラーのCIゲート

本文やボタンの16進数ペアが通常テキストAA(4.5:1)を下回った場合にビルドを失敗させるため、プルリクエストからAPIを呼び出します。

技術的な質問

WCAGコントラスト比チェッカーの料金は?

このページではブラウザ上で無料です。APIでは成功したリクエストごとに$0.002が課金され、無効な入力には課金されません。

KITの完全なドキュメントを見る →

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

無料で実行

計算例

コントラスト比で分かること

16進数入力の読み取り方とAA・AAAの再現性

コントラストチェックが活きるデザインシステム・UIレビュー・CI

活用例

デザイントークンとパレットのレビュー

アクセシビリティのバグ報告

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

お使いのスタックから呼び出す

リクエスト例

レスポンス例

料金

制限

エラー

技術的な注記

WCAGコントラスト比が測るものとレスポンスの内容

16進数入力の読み取り方とAA・AAAの再現性

コントラストチェックが活きるデザインシステム・UIレビュー・CI

連携の活用例

UIカラーのCIゲート

技術的な質問

ありがとう