ForHosting KIT · サイト取得・監視

色のコントラスト比を確認

このカラーコントラストチェッカーは、WCAGの相対輝度式を用いて前景色と背景色を比較します。3桁または6桁の16進色を入力すると、コントラスト比に加え、通常文字と大きな文字それぞれのAA・AAA合否が明確に表示されます。デザイントークンの確認、UI部品のレビュー、アクセシビリティ判断の記録、公開前の読みにくい配色の発見にご利用いただけます。

● Beta無料・ブラウザ内で実行

無料で実行 API仕様を見る

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

判定結果を正しくお読みください

返される比率は、明るい色と暗い色の相対輝度の差を表します。1:1は同じ輝度であり、黒と白の21:1が最大です。大きな文字や太い文字は比較的低いコントラストでも読みやすいため、WCAGには複数の基準があります。AAは通常文字で4.5:1以上、大きな文字で3:1以上、AAAはそれぞれ7:1以上と4.5:1以上です。応答では4つの基準を個別に判定します。WCAGで大きな文字とは18ポイント以上、または太字なら14ポイント以上です。適合を判断する際、表示値を切り上げないでください。比率は見やすいよう小数第2位まで表示しますが、合否には丸める前の値を使います。そのため、境界をわずかに下回る配色が表示上の丸めだけで合格することはありません。

実際の前景色と背景色をお選びください

パレット上で近くに置かれた2色ではなく、利用者が実際に見る色を検査してください。本文では、前景色は描画後の文字色、背景色は文字の直後にある最終的な単色です。リンクについては、通常、訪問済み、ホバー、フォーカス、無効など、情報を伝える各状態をご確認ください。ボタン、バッジ、警告、フォーム、グラフ、ナビゲーションも対象です。本機能は不透明な#RGBまたは#RRGGBBを受け付けます。透明度、グラデーション、画像、影、合成モードがある場合は、検査位置で最終的に描画される色を先に求めてください。背景が場所によって変わる場合は、平均ではなく最もコントラストが低い領域を測ります。フォーカス表示、文字以外のコントラスト、色だけに依存しない情報伝達は別途確認が必要です。

継続的な制作工程に組み込んでください

トークンや部品を容易に変更できる設計初期に検査し、テーマやブランドカラーを変更するたびに再確認してください。デザイナーは引き渡し前に候補を比較でき、開発者は同じ決定論的な計算をテストから呼び出し、結果を部品のスナップショットとともに保存できます。有効なトークン監査では、見本の1組だけでなく、意味を持つ各前景色を使用可能なすべての背景色と組み合わせます。大きな文字ではAAに合格しても通常のラベルでは不合格になる場合があるため、想定する文字サイズと太さも記録してください。API料金は1リクエスト当たり$0.002で、ブラウザー実行版は手早い確認に便利です。不正な色は推測せず拒否するため、誤った桁、アルファ値、CSS色名などを報告書に入る前に発見できます。

活用例

デザイン引き渡しの確認

実装前に、提案された文字色と面の色が目的のWCAGレベルを満たすか確認できます。

デザイントークンの監査

意味を持つ前景トークンを、部品システムで許可されたすべての背景に対して検査できます。

リリース工程の保護

自動テストから決定論的な判定を呼び出し、必要なコントラストを下回る変更を止められます。

よくある質問

どの色形式を使用できますか？

不透明な16進表記#RGBまたは#RRGGBBをご使用ください。CSS色名、アルファ値、rgb()関数、グラデーション、不正な値は受け付けません。

WCAG AAの基準値はいくつですか？

通常文字は4.5:1以上、大きな文字は3:1以上です。

WCAG AAAの基準値はいくつですか？

通常文字は7:1以上、大きな文字は4.5:1以上です。

表示が基準値でも不合格になるのはなぜですか？

表示は小数第2位までですが、判定には丸め前の精度を使うため、わずかに不足する値を合格にしません。

前景色と背景色を交換すると比率は変わりますか？

変わりません。明るい輝度と暗い輝度を比較するため、不透明な2色を交換しても比率と合否は同じです。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/web/color-contrast-check

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

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

curl -X POST https://api.kit.forhosting.com/web/color-contrast-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"foreground":"#1a1a1a","background":"#ffffff"}'

const res = await fetch("https://api.kit.forhosting.com/web/color-contrast-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "foreground": "#1a1a1a",
    "background": "#ffffff"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/web/color-contrast-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "foreground": "#1a1a1a",
    "background": "#ffffff"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/color-contrast-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"foreground":"#1a1a1a","background":"#ffffff"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"foreground":"#1a1a1a","background":"#ffffff"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/color-contrast-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "foreground": "#1a1a1a",
  "background": "#ffffff"
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "web.color_contrast_check",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

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

料金

1リクエストあたり$0.002

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

制限

`timeout_sec`	30
`max_crawl_pages`	25

エラー

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

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