ForHosting KIT · 画像の編集・解析

背景上の文字は読めるか

文字が背景の上で読めるかを判定します。白地に#111827、16 pxの文字はコントラスト比17.74で、AAとAAAを満たします。文字の大きさと太さで、大きな文字の基準が使えるかが決まります。ブラウザで無料で使えます。

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

無料で実行 API仕様を見る

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

計算例

入力した場合

色: #111827
背景: #ffffff
サイズ: 16

結果

サイズの単位: Px
サイズ (pt): 12
サイズ (px): 16
テキストの拡大率: normal

デザイナーと技術者は、一見単純な問いに対してはい／いいえの答えをしばしば必要とします。この文字色は、このサイズで、その背景の上で本当に読めるのでしょうか。コントラスト比だけでは決まりません。ウェブコンテンツアクセシビリティガイドラインは、本文より大きい活字を緩やかに扱うからです。この判定器は文字の16進色、背景の16進色、フォントサイズを受け取り、公表された18ポイントまたは14ポイント太字の規則で試料を normal または large に分類し、公式の相対輝度コントラスト比を指定レベルの下限と比べます。判定は legible という真偽値に、比・しきい値・スケール区分を添えて返します。

サイズを踏まえたWCAG読みやすさの決め方

ウェブコンテンツアクセシビリティガイドラインは、すべての字形を同じようには扱いません。16ピクセルの本文は24ピクセルの見出しより厳しいコントラスト義務を負います。大きな字形は輝度差が小さくても読めるからです。

この判定器はその規則を一つの真偽値にします。文字色と背景を不透明な sRGB の hex として解析し、公式の区分曲線で各8ビットチャネルを線形化し、0.2126、0.7152、0.0722 の重みで相対輝度を組み立てます。コントラスト比は明るい輝度に 0.05 を足した値を、暗い輝度に 0.05 を足した値で割ったものです。

同時に与えられたサイズを CSS ポイントへ換算します。1ポイントはピクセルの3分の4です。試料は少なくとも18ポイント、または少なくとも14ポイントかつ太字のとき large と分類されます。

大きい活字の下限は AA が3対1、AAA が4.5対1です。通常活字は4.5と7です。指定レベルがその四つの床の一つを選びます。

丸めていない比を床と比べるので、表示上の 4.50 が 4.499 を AA に通しません。CSS やスクリーンショットや公開中のページからは何も推測しません。組とサイズを指定すれば、チケット、デザイントークン、自動ゲートに使える再現可能な判定が得られます。

サイズを踏まえた可否判定が役立つ場面

製品チームがこの問いに当たるのは、ブランドの灰色がスライドでは上品でも、白いカード上の16ピクセル本文では落ちるとき、または24ピクセルの見出しなら AA を通る同じ組が、フォームラベルでは落ちるときです。デザイナーはトークンの hex、背後の面、スケール上のサイズを貼り付け、組を確定する前にただ一つの legible 旗を読みます。

品質とアクセシビリティの担当は数値の比、分類したスケール、真偽値をチケットへ添え、修正が本物の組とサイズを狙うようにします。画面写真の推測ではありません。マーケティングはキャンペーン hex を、想定した見出しサイズではなく実際のキャプションサイズでサイト背景と照合します。

このページでは作業はすべてご利用のブラウザ内で進みます。不正な入力は課金されず、応答のあと何も保存しません。公開中のマークアップを辿る必要があるときは全ページのアクセシビリティ走査と、両方のスケールの AA と AAA の旗を一度に欲しいときは単独のコントラスト比行列と組み合わせてください。

検索意図がまさに「その文字がそのサイズでその背景上で安全か」であるときに、このページをお使いください。

活用例

同じ hex 組での本文と見出し

16px の本文では落ちる灰対白のトークンが、24px の大きいテキストとしては通るかを、ヒーローへ再利用する前に確認します。

可否の判定をチケット証拠にする

真偽値、比、分類したスケールをアクセシビリティ不具合へ添え、修正が本物のサイズを狙うようにします。画面写真の推測ではありません。

よくある質問

文字が背景上で読めるかは、どう判断しますか？

文字の hex、背景の hex、フォントサイズを送ってください。

大きいテキストとは何ですか？

WCAG の大スケール文字は少なくとも 18 point、または少なくとも 14 point かつ太字です。この道具は 1pt = 4/3 px で CSS ピクセルを換算するので、24px レギュラーと 18.67px 太字は large です。

どのコントラスト下限が使われますか？

通常テキストは AA 4.5:1、AAA 7:1 です。大きいテキストは AA 3:1、AAA 4.5:1 です。指定レベル（既定 aa）が一つの床を選び、旗は丸めていない比を使います。

どの色形式を受け付けますか？

hex のみです。 #RGB または #RRGGBB で、先頭のハッシュは任意です。

背景上の文字判定の費用はいくらですか？

このページのブラウザでは無料です。不正な入力は課金されません。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/color/safe-on-background

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

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

curl -X POST https://api.kit.forhosting.com/color/safe-on-background \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"color":"#111827","background":"#ffffff","size":16}'

const res = await fetch("https://api.kit.forhosting.com/color/safe-on-background", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "color": "#111827",
    "background": "#ffffff",
    "size": 16
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/safe-on-background",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "color": "#111827",
    "background": "#ffffff",
    "size": 16
},
)
task_id = res.json()["task_id"]

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

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

リクエスト例

{
  "color": "#111827",
  "background": "#ffffff",
  "size": 16
}

レスポンス例

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

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

料金

1リクエストあたり$0.002

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

制限

`max_color_chars`	32
`max_size`	500

エラー

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

技術的な注記

同じ純関数がブラウザでは無料で、API では成功1回あたり $0.002 で動きます。不正な hex、欠けたサイズ、正でないサイズは invalid_input で失敗し、課金されません。

サイズを踏まえたWCAG読みやすさの決め方

ペイロードは legible、小数第2位まで丸めた比、適用した下限、分類したスケールが AA と AAA を通るか、method タグ wcag_relative_luminance を返します。

入力契約、単位、検証

どちらも #RGB または #RRGGBB で、先頭のハッシュはあってもなくてもよく、大文字小文字は区別せず、32文字以内です。換算は正確です。 18ポイントは24ピクセル、14ポイントは18と3分の2ピクセルです。bold の既定は false で、真偽値または文字列 true と false を受け付けます。14ポイント以上では太字が試料を大きいテキストの級へ移します。level の既定は aa で、aa または aaa でなければなりません。検証失敗は課金されません。ネットワーク呼び出しも時計も乱数試料もありません。必須フィールド3つの JSON オブジェクトを送ってください。color は文字の hex で、text_color、foreground、fg、text も受け付けます。background は面の hex で、background_color または bg も受け付けます。アルファ接尾辞、rgb()、hsl()、名前付き CSS 色は、フィールド名を示す invalid_input で拒否されます。size は500以下の正の有限数で、font_size は別名です。size_unit の既定は px（CSS ピクセル）で、pt（CSS ポイント）にもできます。成功時は正規化した小文字 hex、送ったサイズ、size_pt と size_px、bold、normal または large の text_scale、指定レベル、minimum_ratio、contrast_ratio、passes_aa、passes_aaa、真偽値 legible を返します。同じ color、background、size の三つ組は、無料のブラウザ道具でも API でも常に同じ判定になります。

サイズを踏まえた可否判定が役立つ場面

技術者は契約をプルリクエスト検査へつなぎ、16ピクセルのレギュラー本文が 4.5 対 1 を下回ると本文トークンを止め、18ポイントのヒーロー見出しには大きいテキストの床 3 対 1 を許します。API では成功した照合ごとに $0.002 です。

連携の活用例

タイプスケールを知る CI ゲート

16px レギュラーの本文色が AA 4.5:1 を下回ったらプルリクエストを落とします。見出しは大きいテキストの床を使います。

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

背景上の文字は読めるか

無料で実行

計算例

サイズを踏まえたWCAG読みやすさの決め方

サイズを踏まえた可否判定が役立つ場面

活用例

同じ hex 組での本文と見出し

可否の判定をチケット証拠にする

よくある質問

関連ツール

開発者向け — APIアクセス

エンドポイント

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

リクエスト例

レスポンス例

料金

制限

エラー

技術的な注記

サイズを踏まえたWCAG読みやすさの決め方

入力契約、単位、検証

サイズを踏まえた可否判定が役立つ場面

連携の活用例

タイプスケールを知る CI ゲート

ありがとう