ForHosting KIT · 検証・チェック

カラーコントラストを確認

画面上では読みやすく見える配色でも、アクセシブルな文字に必要なコントラストを満たさないことがあります。前景色と背景色を入力すると、正確な比率と、文字サイズ別のWCAG判定を確認できます。

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

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

見た目の印象を数値に置き換えます

同じ配色でも、画面の明るさ、フォントの太さ、周囲の照明、近くにある色によって読みやすさの印象は変わります。そのため、一台の画面で見た感覚だけでは安定した判断になりません。このツールは二つの色をsRGBとして扱い、それぞれの相対輝度を求め、WCAGの式で明るい側と暗い側を比較します。結果にはコントラスト比だけでなく、通常文字のAAとAAA、大きな文字のAAとAAAを分けて表示します。見出しでは合格しても、小さな本文では不足する場合があるためです。

制作データをそのまま入力できます

三桁または六桁のHEX、三つのチャンネルを持つrgb()、彩度と明度を百分率で書くhsl()に対応しています。入力した色は六桁のHEXとRGBに正規化して返すため、CSSの変数とデザインシステムのトークンを比較したり、レビュー結果を再現したりできます。透明度はあえて受け付けません。半透明の色は、下に重なるすべての色によって最終的な見え方が変わるからです。先に実際の背景と合成し、画面に表示される不透明な二色を確認してください。

判定が示す範囲を正しく理解します

合格という結果は、指定した二つの単色の関係だけを示します。実際の文字サイズや太さ、グラデーション、画像、動画上の文字、ホバー状態、キーボードフォーカス、ページの意味構造までは調べません。色が変わる重要な状態は、それぞれ別に確認してください。このページでは計算がブラウザ内で完結するため、配色の見直しをすぐに行えます。継続的インテグレーションでデザイントークンを検査する場合は、同じ二項目をAPIへ送り、同一の構造化結果を品質基準と比較できます。

活用例

デザイントークン公開前の確認

本文用と大見出し用を分けて、文字色と背景色の組み合わせを配色表の公開前に確認します。

部品の状態ごとの品質確認

通常、選択、エラー、フォーカスの各状態を、一台の画面の見え方だけに頼らず検査します。

開発工程での自動判定

APIを継続的インテグレーションから呼び出し、製品が定めたWCAG基準を下回る配色を止めます。

よくある質問

どの色形式を入力できますか？

三桁・六桁のHEX、三チャンネルのrgb()、彩度と明度を百分率で指定するhsl()に対応します。色名と透明度には対応しません。

結果のAAとAAAは何を表しますか？

WCAGの適合レベルです。必要なコントラストが異なるため、通常文字と大きな文字を分けて判定します。

コントラスト確認は無料ですか？

このページのツールは、パソコンや携帯電話のブラウザ内で無料で動作します。APIは成功した一回の処理につき$0.002で、KITの前払い残高を使用します。

携帯電話のネイティブアプリでも無料ツールが動きますか？

いいえ。ネイティブアプリはAPIを呼び出し、そのタスクの価格をアプリ内に表示します。ローカル計算を使う場合は、携帯電話のブラウザでこのページを開いてください。

合格すればページ全体がWCAGに適合しますか？

いいえ。一組の不透明な色だけを確認します。完全な監査では、文字、キーボード、ラベル、画像、各状態なども確認する必要があります。

日本語のサポートはありますか？

申し訳ありませんが、日本語でのサポートは行っておりません。サポートは英語またはスペイン語で、担当者が直接対応します。ツール自体は日本語の環境でも問題なくご利用いただけます。

開発者向け — APIアクセス

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

エンドポイント

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

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

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

curl -X POST https://api.kit.forhosting.com/verify/color-contrast \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d &#39;{"items":["valor-1","valor-2"]}'

const res = await fetch("https://api.kit.forhosting.com/verify/color-contrast", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "items": [
      "valor-1",
      "valor-2"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/verify/color-contrast",
    headers={"Authorization": f"Bearer {os.environ[&#39;KIT_KEY']}"},
    json={
    "items": [
        "valor-1",
        "valor-2"
    ]
},
)
task_id = res.json()["task_id"]

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

body := bytes.NewBufferString(`{"items":["valor-1","valor-2"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/verify/color-contrast", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "items": [
    "valor-1",
    "valor-2"
  ]
}

レスポンス例

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

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

料金

1リクエストあたり$0.002

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

制限

max_color_chars 100

エラー

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

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