1型2色覚シミュレーター
この1型2色覚シミュレーターは、長波長に反応する錐体が機能しない方に、不透明なsRGBの1色がどのように見えるかを再現します。16進数または整数のRGBチャンネルを入力すると、正規化した元の値とシミュレーション後の値を両形式で返します。処理ではsRGBを線形化し、固定のBrettel-Vienot-Mollon射影行列を適用した後、表示可能な色域に収め、8ビットsRGBへ戻します。設計レビューや文書化に使える再現可能なシミュレーションであり、医学的評価ではありません。
無料で実行
画面で使う特定の色を確認します
デザインシステム、スタイルシート、グラフ、または書き出した素材で実際に使っているsRGB値を入力してください。3桁または6桁の16進数、CSS形式のrgb()、あるいはコンマ区切りの3つの整数チャンネルを使用できます。応答には、正規化した元の色とシミュレーション後の色が16進数とRGBの両方で含まれるため、設計メモ、テスト、比較ツールへそのまま利用できます。ただし、変換後の色見本は判断材料の一つであり、アクセシビリティの合否判定ではありません。使いやすさは、コントラスト、文字サイズ、周囲の色、ラベル、模様、操作状態にも左右されます。赤の警告と緑の完了表示には、文字やアイコンなど色以外の手掛かりも付けてください。比較時は同じ方式を一貫して使い、異なる計算方式による差を色そのものの差と誤認しないことが重要です。
決定論的な色処理を理解します
最初に入力を検証し、3つの8ビットsRGBチャンネルへ正規化します。保存された値はガンマ符号化されているため、変換前に線形光へ戻します。次に、その3成分へBrettel、Vienot、Mollonの2色覚シミュレーションに対応する固定の3行3列行列を掛けます。彩度の高い色では表示範囲外の値が生じることがあるため、各成分を0から1までに制限します。その後、標準のsRGB符号化を適用し、最も近い整数へ丸めて形式を整えます。ネットワーク、乱数、時刻、個人プロフィール、非公開の調整値は使用しません。そのため、同じ有効な入力からは常に同じJSONが得られ、回帰テストにも適しています。異なる色空間、行列、色域処理を使う方式は別の結果になり得るため、別方式として明示する必要があります。
結果を適切に解釈します
この結果は、より広いアクセシビリティ確認の一部としてお使いください。赤と緑の系列が似て見える、削除ボタンの強調が弱まる、状態表示が色相だけに依存している、といった問題の発見に役立ちます。問題があれば、変換後の色だけを調整するのではなく、元の画面へラベル、アイコン、形、模様、枠線、間隔などを追加し、適用対象の基準でコントラストも確認してください。ホバー、フォーカス、選択、無効、エラー、成功の各状態も検証します。このモデルは個人差、ディスプレイ、周囲の照明、すべての閲覧状況を表すものではなく、診断、視力測定、適合認証も行いません。重要な製品では当事者による評価も有用です。自動処理では元の色、結果、方式名、判断内容を記録し、シミュレーション色を正式なブランド色と混同しないようにしてください。
活用例
デザイントークンを確認する
警告、成功、アクセント、グラフの色を統一した方式で変換し、公開前に確認します。
データ可視化を検証する
系列のシミュレーション結果を比較し、色相だけで区別できない場合はラベル、模様、マーカーを追加します。
回帰テストを作成する
決定論的なRGB結果を保存し、将来のパレット変更を重点的にレビューできるようにします。
よくある質問
シミュレーションの料金はいくらですか?
APIリクエスト1回の料金は$0.002です。1回につき1色を1項目として処理します。
どの入力形式を使用できますか?
#RGB、#RRGGBB、rgb(r, g, b)、またはコンマ区切りの3整数を使用でき、各値は0から255です。
なぜ最初にsRGBを線形化するのですか?
行列は線形光での変換を表すためです。ガンマ符号化値へ直接適用すると計算内容が変わります。
アクセシビリティ適合を証明できますか?
いいえ。色変換の再現に限られ、適合性にはコントラスト、文脈、補助的な手掛かり、各状態も関係します。
医学的な検査ですか?
いいえ。1型2色覚の診断や個人の知覚予測は行わず、設計と開発を支援する決定論的なツールです。
開発者向け — APIアクセス
このページの機能はすべてAPIからも利用できます。自社システムに組み込みたいチーム向けのセクションです。それ以外の方は上のツールをそのままお使いください。
エンドポイント
Bearerトークンで認証し、POST1回でタスクをキューに登録します。結果はWebhookまたは署名付きリンクで受け取れます。
お使いのスタックから呼び出す
curl -X POST https://api.kit.forhosting.com/color/sim-protanopia \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#e63946"}'const res = await fetch("https://api.kit.forhosting.com/color/sim-protanopia", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#e63946"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/sim-protanopia",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#e63946"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/sim-protanopia", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#e63946"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#e63946"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/sim-protanopia", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)リクエスト例
{
"color": "#e63946"
}レスポンス例
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.sim_protanopia",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}非同期APIです。task_idは即時に返ります。ポーリングは1秒あたり1リクエストまでです。
料金
単価はすべて公開しています。トークン換算や独自クレジットはありません。失敗したタスクは課金されません。
エラー
| HTTP | コード | 意味 |
|---|---|---|
401 | unauthorized | APIキーが無効か、指定されていません。Authorizationヘッダーを確認してください。 |
402 | insufficient_balance | 残高が不足しています。チャージ後に再度お試しください。 |
404 | unknown_type | 指定されたタスクタイプは存在しません。タイプ名を確認してください。 |
429 | rate_limited | リクエストが多すぎます。しばらく待ってから再度お試しください。 |