W3C明るさの差計算
W3Cの旧来の明るさテストで2色を比べます。黒と白の差は255で、合格に必要な125を大きく上回ります。過去の監査の再現に便利ですが、現在のアクセシビリティ判断にはWCAGのコントラスト確認を使ってください。ブラウザで無料で使えます。
- 無料
- ブラウザで動作
- 登録不要
- データは端末の外に出ません
無料で実行
計算例
- 色1
- #000
- 色2
- #fff
- 色1
- #000000
- 色2
- #FFFFFF
- 明るさ1
- 0
- 明るさ2
- 255
この計算機は、W3CのAERT草案に由来する歴史的な知覚明度の式で2つの16進色を比較します。各色を重み付きの明るさに変換し、絶対差が125を超えるか判定します。正規化した色、2つの明るさ、差、しきい値、合否を決定的な結果として返します。古い監査の再現には役立ちますが、現在のWCAGコントラスト比の代わりにはなりません。
従来の明るさテストが測るもの
このテストは、赤・緑・青の各チャンネルに異なる重みを付け、色がどの程度明るく見えるかを推定します。人の視覚は緑に最も敏感で、次に赤、青の順となるため、赤に299、緑に587、青に114を掛け、合計を1000で割ります。2色それぞれの明るさを求めた後、その絶対差を計算します。
差が125より大きい場合だけ合格し、ちょうど125の場合は不合格です。色の順序を替えても判定は変わりません。この処理が測るのは明るさの隔たりだけであり、別の従来型色差式や、現在のWCAGが要求するコントラスト比は計算しません。
古い規則の再現、旧ツールとの照合、またはこの式を明示した既存システムの保守にご利用ください。新しいアクセシビリティ評価では、完全な適合判定ではなく補足情報として扱う必要があります。
色の入力方法と結果の読み方
各色は先頭に番号記号を付けた16進RGB表記で入力してください。#0AFのような3桁表記と、#00AAFFのような6桁表記に対応しています。3桁の場合は各桁を繰り返して展開し、結果では大文字6桁に正規化します。
アルファチャンネル、CSS色名、rgb()関数、空白、番号記号のない値は推測せずに拒否します。
監査と自動処理での活用方法
正規化された色と返された差を監査記録に保存すれば、画面画像やブラウザーの色解釈に頼らず、別の担当者が判定を再現できます。自動処理ではpassesを参照し、詳細値を報告や原因調査にお使いください。不合格は歴史的なしきい値を超えないことだけを、合格は超えることだけを意味します。
現在のWCAGは相対輝度、コントラスト比、文字条件別の基準を使うため、どちらの結果も現行の適合レベルを証明しません。両方が必要な場合は、この従来テストとは別にWCAGコントラスト検査を実行してください。
活用例
過去のアクセシビリティ監査を再現
正確な重みと厳密な超過条件を使い、歴史的な判定を再計算します。
保存済みデザイン体系を調査
作成当時の明るさテストに基づき、古い配色の結果を記録します。
よくある質問
どの式を使用しますか?
各色について(299 × 赤 + 587 × 緑 + 114 × 青) / 1000を計算し、その絶対差を求めます。
従来テストの合格値はいくつですか?
明るさの差が125より大きい必要があります。ちょうど125は不合格です。
合格すれば現在のWCAGコントラスト要件を満たしますか?
いいえ。 現在のWCAGは相対輝度とコントラスト比を使います。これは別の歴史的テストです。
どの色形式に対応していますか?
#RGBまたは#RRGGBBをお使いください。アルファ、CSS色名、rgb()構文、前後の空白には対応しません。
色の順序は結果に影響しますか?
いいえ。 絶対差を使うため、色を逆にしても差と合否は変わりません。
関連ツール
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/brightness-diff-w3c \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color_1":"#000000","color_2":"#FFFFFF"}'const res = await fetch("https://api.kit.forhosting.com/color/brightness-diff-w3c", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color_1": "#000000",
"color_2": "#FFFFFF"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/brightness-diff-w3c",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color_1": "#000000",
"color_2": "#FFFFFF"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/brightness-diff-w3c", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color_1":"#000000","color_2":"#FFFFFF"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color_1":"#000000","color_2":"#FFFFFF"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/brightness-diff-w3c", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color_1": "#000000",
"color_2": "#FFFFFF"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.brightness_diff_w3c",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
制限
max_color_chars | 7 |
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |
技術的な注記
色の入力方法と結果の読み方
応答のbrightness_1とbrightness_2は0から255の明るさ、brightness_differenceは絶対差、thresholdは125、passesは真偽値です。安定したJSONにするため表示値は小数第3位までに丸めますが、合否には丸め前の値を使います。そのため境界付近でも表示上の丸めが判定を変えることはありません。color_1とcolor_2を入れ替えると個別の明るさだけが入れ替わり、差と合否は同じままです。
監査と自動処理での活用方法
APIは1回$0.002で、ブラウザー版もネットワーク、乱数、日時、隠れた状態を使わず、同じ決定的ロジックを実行します。
連携の活用例
回帰テストを保護
既定の色ペアを比較し、従来の受入規則に生じた変更を検出します。
技術的な質問
APIリクエストの料金はいくらですか?
APIリクエスト1回は$0.002です。ブラウザーでは同じ決定的ロジックをローカル実行します。