APCAコントラスト計算機
文字色が背景の上でどれだけ読みやすいかを数値で確かめられます。白地に濃い#111827の文字はLc 104.5となり、色を入れ替えると符号が反転します。デザインの確認で根拠として示せる1つの数値です。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- テキスト
- #111827
- 背景
- #ffffff
- Lc
- 104.5
- Lcの絶対値
- 104.5
- 極性
- BoW
- 可読性
- body_fluent
このAPCAコントラスト計算機は、テキスト色と背景色をhexコードで受け取り、WCAG 3草案の可読性作業で用いられるAccessible Perceptual Contrast Algorithmが算出する符号付きLc（明度コントラスト）を返します。古いWCAG 2.xのコントラスト比とは異なり、APCAは極性に敏感です。明るい面の上の暗いテキストは正のLcとなり、暗い面の上の明るいテキストは同程度の大きさの負のLcとなります。デザイナー、開発者、アクセシビリティの専門家は、その一つの数値をフォントサイズとウェイトの参照表と合わせて使い、本文、UIラベル、非テキストの線が自発光ディスプレイ上で読めるかを判断します。エンジンは公開定数0.0.98G-4gを実装しています。べき乗2.4の線形化、sRGBのY係数、黒のソフトクランプ、BoW/WoBのSAPCスケーリングです。結果は完全に決定的で、ネットワーク呼び出し、サンプリング、日付依存の近道はありません。ブラウザではペアを無料で試せます。
APCAのLcが測るもの、およびWCAG 2コントラスト比との違い
APCAは、モニターのガンマ、柔らかい黒レベル、暗色の上の明色と明色の上の暗色を人間の視覚が非対称に扱う仕方をモデル化し、自発光画面上のテキストと非テキスト内容の知覚コントラストを予測します。出力はおおよそプラスマイナス百十前後にまたがる符号付きLcです。
たとえば純白の上のほぼ黒の本文はLc九十前後以上になりやすく、同じ色を反転すると大きな負のLcになります。一方WCAG 2.xは相対輝度から正の単一コントラスト比を返し、AAとAAAの固定しきい値は4.5対1や7対1などです。その比は極性を無視し、実際に読みにくい中間調のペアを過大評価または過小評価しがちです。
本計算機は常に符号付きLc、絶対値、極性タグBoW（black on white／明るい上の暗いテキスト）またはWoB（white on black／暗い上の明るいテキスト）、各色の線形化Y、および絶対Lcから導く粗い可読性バンドを返して素早く振り分けます。ページ巡回、CSS解析、不透明度のブレンド、グラデーションのサンプリングはありません。
明示的なhex色を二つ渡し、主観的なスクリーンショット意見ではなく数値のLcを引用すべきデザイン・トークンのゲート、アクセシビリティのチケット、自動化されたパレットレビューに適した再現可能なオブジェクトを受け取ります。
hex入力の読み方と、0.0.98G-4g経路が決定的である理由
値はどちらもhexでなければなりません。先頭のハッシュは任意で、三桁が六桁に展開されるか、六桁フルで、大文字小文字は問いません。各色は三十二文字までで、検証を安価に保ち誤貼り付けを防ぎます。
解析後、各チャネルは二百五十五で割ったあと2.4乗され、APCAのsRGB係数0.2126729、0.7151522、0.0721750と組み合わせてYになります。0.022以下のほぼ黒のYにはソフトクランプがかかり、純黒が過度に不利にならないようにします。
背景YがテキストYより高いときはBoW分岐が指数0.56と0.57、スケール1.14、オフセット0.027を適用し、それ以外はWoB分岐が0.65と0.62を使い負のLcを返します。極めて小さな輝度差はゼロにクリップされます。
デザインシステム、ダークモード、WCAG 3準備におけるAPCA検査の位置
製品チームは、WCAG 2 AAを通ったブランドパレットがダークモードで濁って見えるとき、柔らかい面上の中間グレー文字が人による可読性試験に落ちるとき、あるいは利害関係者が古い比だけではなくWCAG 3草案の議論に沿ったLc数値を求めるときにAPCAを使います。
QAとアクセシビリティ専門家は符号付きLcと極性をバグ報告に付け、開発者がスクリーンショットから推測せず正確なペアを直せるようにします。コンテンツとマーケティングは、キャンペーンのhexがサイトの明暗背景に置いても本文最小バンドをクリアするかを確認します。このページでは処理はすべてブラウザ内で行われます。
AA/AAAの文書がまだ必要なときはWCAG 2比チェッカーと、Lc計算前にRGBやHSLの中間が必要なときは色変換ツールと組み合わせてください。
活用例
デザイン・トークンとダークモードの確認
ブランド・トークンを確定する前に、ライト／ダークの各テーマでテキストと背景の全ペアの符号付きLcと極性を確認します。
極性付きアクセシビリティ不具合報告
符号付きLc、BoW/WoB極性、可読性バンドを添付し、曖昧なスクリーンショットではなく正確なhexペアを直せるようにします。
よくある質問
どの色形式が受け付けられますか？
hexのみです。 #RGBまたは#RRGGBBで、先頭ハッシュの有無は任意、大文字小文字は問いません。
Lcとは何で、なぜ負になり得ますか？
LcはAPCAの明度コントラストです。正は明るい背景上の暗いテキスト（BoW）、負は暗い背景上の明るいテキスト（WoB）です。極性に敏感な報告では符号を保ち、大きさのしきい値比較でのみ絶対値を使ってください。
WCAGコントラスト比チェッカーとどう違いますか？
WCAG 2.xは正の単一比とAA/AAAフラグを返します。APCAは極性付きの符号付きLc、異なる数学（べき乗2.4のY、黒のソフトクランプ、BoW/WoB指数）を返し、4.5:1／7:1ゲートではなくWCAG 3草案の可読性作業向けです。
このツールはウェブサイト全体のコントラストを調べますか？
いいえ。ページの巡回やスタイルの読み取りは行いません。文字色と背景色の2色を指定すると、その組み合わせのLcを返します。
白地に黒に近い文字のLcはいくつですか？
#ffffffの背景に#111827の文字ならLc 104.5です。暗い文字を明るい背景に置く極性で、本文に向く読みやすさの区分になります。色を入れ替えると値は負になります。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/apca-contrast \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"text":"#111827","background":"#ffffff"}'const res = await fetch("https://api.kit.forhosting.com/color/apca-contrast", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"text": "#111827",
"background": "#ffffff"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/apca-contrast",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"text": "#111827",
"background": "#ffffff"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/apca-contrast", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"text":"#111827","background":"#ffffff"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"text":"#111827","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/apca-contrast", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"text": "#111827",
"background": "#ffffff"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.apca_contrast",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_color_chars | 32 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
デザインシステムのCI、Figmaバックエンド、トークンパイプラインが毎回同じLc行列を必要とする場合は、成功したリクエストごとに$0.002でAPIを呼び出してください。
APCAのLcが測るもの、およびWCAG 2コントラスト比との違い
methodフィールドはapca_0.0.98G-4gに固定され、CIログがどの定数セットで数値が生まれたかを正確に記録します。無効なhex、欠落フィールド、文字列以外、長すぎる文字列はinvalid_inputで拒否され、課金されません。
hex入力の読み方と、0.0.98G-4g経路が決定的である理由
推奨フィールドは、前景のインクやアイコン色のtextと、背後の面のbackgroundです。エイリアスforeground、fg、color1、hex1はtextに、bg、color2、hex2はbackgroundに対応するため、表計算、クエリ文字列、フォームは列名を変えずに同じ契約を再利用できます。アルファ接尾辞、rgb()関数、hsl()関数、名前付きCSS色、裸の整数は、フィールド名と受け取った内容を示すメッセージで拒否され、不正なトークンが静かなfail-openになりません。
デザインシステム、ダークモード、WCAG 3準備におけるAPCA検査の位置
デザイナーはFigmaやトークンJSONからhexペアを貼り、スケールを確定する前に極性とbody_preferredやlarge_textのようなバンドを読みます。エンジニアは同じ契約をプルリクエスト検査に組み込み、本文色の絶対Lcが六十のようなチームしきい値を下回ればトークン変更を止め、意図的に面に近いダークテーマのヒーロー見出しではWoB値を記録します。APIでは成功した照会ごとに$0.002で、検証失敗は課金されず、応答後に何も保存されません。無料の対話的探索と同一計算の有料APIという分割は、KITのティアAカタログの他項目と同じで、パレットの打ち合わせから自動化パイプラインへ数学的結果を変えずに移行できます。
連携の活用例
WCAG 3草案準備のためのCIゲート
本文色の絶対Lcがチームのしきい値を下回ったときにビルドを落とすよう、プルリクエストからAPIを呼び出します。
技術的な質問
APCAコントラスト計算機の料金はいくらですか？
このページではブラウザで無料です。APIでは成功したリクエストが$0.002で、無効な入力は課金されません。
このツールはサイトのコントラスト問題を走査しますか？
いいえ。提供された二つのhex色だけを比較します。ライブページ監査には専用のアクセシビリティスキャナを使い、このエンドポイントは二色のAPCA Lcの問いに安定したJSONで答えます。