ForHosting KIT · 開発者向けツール

色覚多様性に配慮した配色を検査｜1型・2型色覚

カテゴリー配色には、通常の見え方で美しいこと以上の配慮が必要です。グラフ、地図、ダッシュボード、インターフェースを赤緑系の色覚特性がある方が見ても、それぞれの色を区別できなければなりません。本ツールは、完全な1型色覚と2型色覚をシミュレーションし、知覚色空間ですべての色ペアを測定して、指定した識別しやすさのしきい値を下回る組み合わせを示します。再現可能な早期警告として活用できますが、ラベル、形状、線種、実際の表示サイズを含む最終確認はデザイン工程で行ってください。

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

無料で実行 API仕様を見る

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

カテゴリー配色の全組み合わせを検査します

カテゴリー色は、グラフの商品系列、地図の経路、ダッシュボードの状態、計画画面のチームなど、独立した分類を区別するために使われます。多彩に見える配色でも、赤緑系の色覚特性がある方には2色が近づいて見える場合があります。2色から64色までの16進色を入力してください。本ツールは短縮表記と通常表記を正規化し、重複しないすべてのペアを評価して元のインデックスを返すため、ソースシステム内の色見本を正確に特定できます。結果には、配色全体の合否、検査したペア数、注意が必要なペアが表示されます。さらに、1型色覚と2型色覚でシミュレーションした16進色も返すため、数値結果をデザインレビューで確認・再現しやすくなります。警告されたペアは、明度、彩度、色相の差を広げてから再検査してください。同じ色を重ねた場合は知覚距離が0なので警告されます。不正な表記、上限を超えるリスト、2色未満の配色は、誤解を招く結果を出さずエラーとして扱います。

シミュレーションとしきい値を理解します

計算では、最初に各sRGB色を復号し、チャンネルを線形化します。色覚特性の行列をガンマ符号化された表示値へ直接適用してはならないためです。次に、完全な1型色覚と2型色覚について確立された行列を別々に適用し、各シミュレーション結果をCIE Labへ変換して、CIE76の式でペア間の距離を測ります。距離がしきい値を厳密に下回ったペアが警告対象です。既定値の20は、カテゴリー配色を実務的に選別するための値であり、1つの数値ですべての方や閲覧条件を表せるという意味ではありません。より緩やかな技術検査には値を下げ、小さな記号、細い線、品質の低い画面、短時間での読み取りに強い分離が必要な場合は上げられます。出力では2つの条件を分けて保持し、統合リストも提供します。そのため、自動処理は1回の失敗として扱いながら診断情報を失いません。警告ペアには元の色距離も含まれ、当初は離れていた色がシミュレーション後に近づく様子を確認できます。表示する距離は、結果を安定させるため丸めています。

アクセシブルなデザインの一要素として使います

合格した配色は有用な根拠になりますが、アクセシビリティ全体を保証するものではありません。色の見え方は、周囲の色、記号の大きさ、アンチエイリアス、画面調整、周囲の光、個々の色覚特性の種類や程度によって変化します。特に、重要な意味を色だけで伝えないようにしてください。直接的なラベル、アイコン、模様、形状、破線、位置などを併用すれば、2色の名前を判別しにくい場合でもカテゴリーを識別できます。グラフでは、孤立した色見本だけで承認せず、完成した可視化を実際の表示サイズで試してください。成功・失敗などの状態では、文字と背景のコントラストを別途確認します。カテゴリー間距離とWCAGコントラストは異なる問題を測るからです。デザインシステムでは、配色トークンが変わるたびに本機能を実行し、決定論的なJSON結果を他の品質検査と保存できます。同じ順序の入力には常に同じ計算が返り、ネットワーク、乱数、モデル推論、時刻依存データは使いません。ブラウザーとAPIは同じソルバーを共有するため、対話的な試行と継続的インテグレーションでのしきい値適用を、1リクエスト$0.002で行えます。

活用例

グラフ系列の色を確認

ダッシュボード公開前に、赤緑系の色覚特性で近づく可能性がある線、棒、面の色を見つけます。

デザインシステムのトークンを保護

カテゴリー色トークンの変更時に決定論的な検査を行い、新たに曖昧なペアを生む改訂を止めます。

地図や状態カテゴリーを監査

色相・明度の差、ラベル、模様、アイコンの追加が必要な地域、経路、状態色を特定します。

よくある質問

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

#RGBまたは#RRGGBB形式の16進sRGB色をご使用ください。短縮表記を展開し、出力は大文字の#RRGGBBへ正規化します。

しきい値は何を表しますか？

シミュレーション後に許容する最小CIE76距離です。これを下回るペアを警告し、既定値は20です。

安全という結果でアクセシビリティを保証できますか？

いいえ。配色の選別結果です。冗長な手掛かりを加え、完成デザインを試し、適切なコントラスト検査も実施してください。

どの色覚特性をシミュレーションしますか？

完全な1型色覚と2型色覚を別々にシミュレーションし、各条件で問題になるペアを報告します。

元の距離を含める理由は何ですか？

シミュレーション前には大きく離れて見えても、1つまたは両方の条件で近づくペアを確認するためです。

APIの料金はいくらですか？

APIリクエストごとに$0.002です。同じ決定論的ソルバーをブラウザーでも利用できます。

開発者向け — APIアクセス

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

エンドポイント

POSThttps://api.kit.forhosting.com/color/color-blind-safe-palette-check

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

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

curl -X POST https://api.kit.forhosting.com/color/color-blind-safe-palette-check \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"colors":["#0072B2","#D55E00","#009E73","#CC79A7"]}'

const res = await fetch("https://api.kit.forhosting.com/color/color-blind-safe-palette-check", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "colors": [
      "#0072B2",
      "#D55E00",
      "#009E73",
      "#CC79A7"
    ]
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/color/color-blind-safe-palette-check",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "colors": [
        "#0072B2",
        "#D55E00",
        "#009E73",
        "#CC79A7"
    ]
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/color-blind-safe-palette-check", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"colors":["#0072B2","#D55E00","#009E73","#CC79A7"]}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"colors":["#0072B2","#D55E00","#009E73","#CC79A7"]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/color-blind-safe-palette-check", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

リクエスト例

{
  "colors": [
    "#0072B2",
    "#D55E00",
    "#009E73",
    "#CC79A7"
  ]
}

レスポンス例

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.color_blind_safe_palette_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の完全なドキュメントを見る →