ForHosting KIT · 検証・チェック

アクセシブルな最小フォントサイズを確認

文字が小さすぎると、それ以外は使いやすい画面でも読みにくくなります。特に、弱視の方、高齢の方、見づらい環境で画面を使う方への影響は大きくなります。このツールは、CSS ピクセルで指定した文字サイズを、本文、キャプション、ボタンラベルごとの実用的な最小値と比較します。適用した基準値、基準を満たすかどうか、基準との差を正確に返します。結果はアクセシビリティを早い段階で確認するための目安であり、文字サイズだけでデザイン全体のアクセシビリティを保証するものではありません。

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

無料で実行 API仕様を見る

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

数値を判定する前に文章の役割を選びます

同じ文字サイズでも文章の役割によって必要な読みやすさが異なるため、数値だけでは判断できません。このツールでは、長く読み続ける本文に一般的な最小値として 16 CSS ピクセルを使用します。キャプションは短く補助的な場合が多いため 12 ピクセル、操作部品の中でも読み取れる必要があるボタンラベルは 14 ピクセルと比較します。見た目ではなく、言葉が果たす役割を選んでください。記事と同じ書体でも画像の下にある説明はキャプションです。リンクのように見える場合でも、操作できる部品の文字はボタンラベルです。役割を明示すると、ページが変わっても同じ基準で監査でき、すべての要素に最も小さい基準を適用してしまうことを防げます。これらは広く使われる実務上の目安であり、あらゆる法的要件を満たす一律の基準ではありません。利用者、書体、端末、閲覧環境に応じて、デザインシステムでさらに大きな最小値を定めることも重要です。

結果は一次判定としてお読みください

結果には、入力したサイズ、選択したコンテンツ種別、比較に使った最小値、基準を満たすかどうか、符号付きの差が含まれます。差がゼロなら基準値とちょうど一致し、この確認には合格します。負の値は不足している大きさを、正の値は基準を上回る余裕を示します。この単純な比較は、デザイントークンの確認、コンポーネント一覧の監査、自動品質チェック、受け入れ条件などに適しています。曖昧な懸念を、繰り返し同じ結果が得られる判断へ変えられるためです。ただし、合格はアクセシビリティ評価の終了ではなく開始点です。見かけの大きさは、書体、太さ、字形、行間、画面密度、ズーム、レイアウトにも左右されます。16 ピクセルでも、コントラストが弱い場合や一行が長すぎる場合は読みづらくなります。この判定で問題候補をすばやく見つけた後、実際の文章を入れた表示、支援設定、想定する利用者による確認を行ってください。

最小サイズと柔軟な文字設計を組み合わせます

アクセシブルな文字設計には、利用者がページに加える実際の調整へ対応できることが必要です。指摘されたサイズを直した後は、拡大しても文字が切れないこと、操作部品を大きくしてもラベルが失われないこと、横スクロールを強制せずにレイアウトが折り返されることを確認してください。実装では、利用者の設定を維持しやすい場合に相対的な CSS 単位を選ぶことを推奨します。このツールが明確な比較のためにピクセル値を受け取ることとは両立します。通常、ホバー、フォーカス、無効、エラーの各状態でコントラストを確認し、本文には読みやすい行間と行長を設けてください。重要な説明を小さなキャプションだけに置かないことも大切です。ボタンでは、文字が読めても、押せる範囲が小さい、フォーカスが見えない、アクセシブルな名前がないといった問題は解消されません。基準は本文 16、キャプション 12、ボタン 14 ピクセルです。より高い配慮が必要な環境では、さらに大きな社内基準を採用してください。

活用例

デザイントークンを確認する

製品全体へコンポーネントを実装する前に、文字の値を一貫した基準と比較できます。

コンポーネント集を監査する

再利用部品を一覧化するときに、小さすぎる本文、キャプション、ボタンラベルを見つけられます。

公開前チェックを追加する

再現性のある API 結果を使い、文書化されたアクセシビリティ工程でサイズの後退を検出できます。

よくある質問

最小値を満たせばアクセシビリティ要件に適合しますか？

いいえ。これは実用的な一次確認であり、法的な認証ではありません。コントラスト、拡大、折り返し、間隔、書体の読みやすさ、内容、操作方法も重要です。

どの単位で文字サイズを入力しますか？

計算後のサイズを CSS ピクセルで入力してください。スタイルシートが rem または em の場合は、表示時の値をピクセルへ換算してから確認します。

どの基準値を使用しますか？

本文は 16px、キャプションは 12px、ボタンラベルは 14px と比較します。一般的な実務上の目安であり、デザインシステムではより大きく設定できます。

キャプションが本文より小さくてもよいのはなぜですか？

キャプションは通常短く補助的ですが、読める必要があります。小さなキャプションだけに重要な指示を置かないでください。

別のコンテンツ種別を送るとどうなりますか？

無効な入力としてエラーになります。定義済みの基準を使うには body、caption、button_label のいずれかを指定してください。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/verify/accessibility-font-size-min-check

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

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

curl -X POST https://api.kit.forhosting.com/verify/accessibility-font-size-min-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"font_size":16,"content_type":"body"}'

const res = await fetch("https://api.kit.forhosting.com/verify/accessibility-font-size-min-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "font_size": 16,
    "content_type": "body"
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/verify/accessibility-font-size-min-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "font_size": 16,
    "content_type": "body"
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/verify/accessibility-font-size-min-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"font_size":16,"content_type":"body"}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"font_size":16,"content_type":"body"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/verify/accessibility-font-size-min-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "font_size": 16,
  "content_type": "body"
}

レスポンス例

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

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

料金

1リクエストあたり$0.002

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

エラー

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

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