ForHosting KIT · 画像の編集・解析

読みやすい文字色の提案

色味を保ったまま、コントラスト不足の文字色を直します。白地の#888888は3.54:1しかないため、#767676まで暗くして4.54:1とし、目標の4.5をわずかに上回ります。変わるのは明度だけです。ブラウザで無料で使えます。

  • 無料
  • ブラウザで動作
  • 登録不要
  • データは端末の外に出ません
ご利用方法 ウェブAPIメールTelegramアプリ 近日
入力した場合
背景
#ffffff
テキスト
#888888
目標比率
4.5
結果
元の比率
3.54
推奨比
4.54
方向
darken
調整前の明度
53.33

この読みやすい文字色の提案ツールは、背景の16進カラー、開始用の文字16進カラー、目標のWCAGコントラスト比を受け取り、HSLの明度だけをずらしてその比を満たす文字色を返します。色相と彩度は固定のままなので、ブランドの青は青のまま、指定した面でAAまたはAAAを通るまで暗く、あるいは明るくなります。開始色がすでに目標を満たしていれば、変更なしで返し、未調整として印を付けます。デザイナー、デザイントークンの著者、CIジョブは、コントラスト判定だけでは足りないときに使います。合否フラグだけでなく、決定的な置き換え用16進値が必要だからです。ネットワーク呼び出し、乱数シード、時計の読み取りはありません。

明度探索がWCAGコントラスト目標を満たす仕組み

ウェブ上のコントラストは好みの問題ではありません。ウェブコンテンツアクセシビリティガイドラインは、相対輝度からただ一つのコントラスト比を定め、本文、ボタン、ラベルが弱視の人にも読みやすく残るようにします。

この提案ツールは、背景の16進値と開始用の文字16進値から始め、その文字色のHSL明度だけを変え、背景に対するWCAG 2.x比がご指定の目標に達するまで進めます。色相と彩度はそのままなので、ブランドのネイビーはネイビー、ブランドの赤は赤のままです。動くのはインクの明るさだけです。

エンジンは各sRGBチャネルを公式の区分曲線で線形化し、0.2126、0.7152、0.0722の重みで輝度を組み立て、明るい方の輝度に0.05を足した値を暗い方に0.05を足した値で割ります。続いてHSL明度を決定的な0.1パーセント刻みで黒方向と白方向へ歩き、各段を8ビットRGBへ戻し、丸め前の目標を満たす最初の量子化16進値を各方向で残します。

明度変化が小さい候補が勝ち、同点では暗くする方を選びます。これは明るいカード上のグレー文字へのいつもの修正です。開始色がすでに目標を満たしていれば、理由なくトークンを書き換えないよう、そのまま返します。

乱数ジッタ、ネットワーク照会、日付依存の近道はありません。同じ3つの入力は常に同じ提案16進値と同じ検証フラグを生みます。

読みやすい文字色の提案が役立つ現場

製品チームがこのページに来るのは、ブランドのグレーが販促スライドでは上品でも白いカード上の本文で落ちるとき、明るいトークンからダークモードテーマを作るとき、法務がスクリーンショットの感想ではなく置き換え16進値を求めるときです。

デザイナーはFigmaやトークンファイルから面と開始インクを貼り付け、目分量で明度スライダを動かす代わりに、提案された16進値をパレットへ戻します。QAとアクセシビリティの担当者は元の比、提案比、提案16進値をチケットへ付け、開発者が正確なペアを直せるようにします。

コンテンツとマーケティングのチームは、キャンペーン色をサイトの明暗背景へ置いたときにも合法な文字の相棒があるかを確かめます。すでに選んだペアを測るだけならコントラスト判定のページを使い、このページは通る文字色を提案する意図を担います。

落ちる本文トークンを直す

白いカード上でAAを外すブランドグレーに対し、色相を変えずに 4.5:1 を通る最も近い暗い16進値を得ます。

ダークモードとライトモードのインク

一つの開始文字色から、明るい面で通る相棒と暗い面で通る相棒を導きます。

読みやすい文字色の提案は16進値をどう選びますか?

開始の色相と彩度を保ち、HSL明度を黒方向と白方向へ歩き、WCAG 2.xコントラストが目標を満たす最も近い量子化16進値を返します。同点では暗くする方を選びます。

どの目標比を依頼できますか?

1 から 21 までの任意の有限数です。既定は 4.5(通常テキストAA)です。大きいテキストのAAには 3、通常テキストのAAAには 7 を使います。

受け付ける色形式は何ですか?

16進のみです。 #RGB または #RRGGBB で、先頭のハッシュは任意、大文字小文字は問いません。

どの明るさでも目標に届かない場合はどうなりますか?

黒か白のうち有利なほうが返され、目標に届かないことがはっきり示されます。たとえば中間グレーのカードでAAAの7:1を求めた場合に起こります。

ブランドカラーの色相は変わりますか?

変わりません。色相と彩度は固定で、明度だけを変えます。紺は紺のまま、目標のコントラストに届くまで暗く、または明るくなります。

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

POSThttps://api.kit.forhosting.com/color/suggest-accessible-text

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

curl -X POST https://api.kit.forhosting.com/color/suggest-accessible-text \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"background":"#ffffff","text":"#888888"}'
{
  "background": "#ffffff",
  "text": "#888888"
}
{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.suggest_accessible_text",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

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

1リクエストあたり$0.002

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

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

その色相のどの明度でも目標に届かない場合 — たとえば中間グレーのカード上のAAA 7:1 — でも、黒か白のより良い極端を返し、パイプラインがフェイルクローズできるよう meets_target を false にします。無料のブラウザツールとAPIは同じ同型関数を共有するので、パレット検討と自動ゲートの結果が食い違うことはありません。成功したAPI呼び出しは1件あたり$0.002、無効な入力は課金されません。

送るもの、返るもの、検証の働き

背景の16進値と開始用の文字16進値を送ってください。よく使う目標は大きいテキストのAAが 3、通常AAが 4.5、通常AAAが 7 です。同一色から黒対白までのWCAG範囲であるため、1 から 21 までの有限数が受け付けられます。成功時は正規化した6桁の背景・文字・提案スウォッチと印刷可能な rgb 文字列を返します。adjusted は16進値が実際に動いたかを示し、direction は none、darken、lighten です。短い formula 文字列が規則を記録します。省略可能な target_ratio の既定は通常テキストAAのしきい値 4.5 です。背景は別名 bg も受け付け、文字は foreground、fg、color を、target_ratio は ratio と target を受け付けます。欠落フィールド、非16進文字、アルファ形式、誤った長さ、NaN、Infinity、閉区間外の目標は invalid_input で失敗し、課金されません。original_ratio と suggested_ratio は表示用に小数第2位へ丸め、meets_target は丸め前の提案比を目標と比較するので、印刷上の 4.50 が真の 4.499 を隠すことはありません。lightness_before と lightness_after でHSLの段を監査できます。wcag オブジェクトは提案ペアの normal_aa、normal_aaa、large_aa、large_aaa を報告するので、依頼した一つの目標だけでなく行列全体を見られます。デザイントークンのパイプラインが継続的インテグレーションで同じ16進値を必要とするときは、無料のブラウザフォームと1件成功あたり $0.002 の同一APIを組み合わせてください。

読みやすい文字色の提案が役立つ現場

技術者は通常テキストAAが 4.5 を下回るときにトークンを書き換えるか拒否するプルリクエスト検査へ同じ契約を配線し、中間グレーでの不可能なAAA要求が合格したかのように黒を黙って公開しないよう meets_target を読みます。この能力は純粋な parse エンジンなので、API料金は成功1件あたり公表ベースの $0.002 であり、失敗した検証は残高を消費しません。

置き換え16進値が必要なCIゲート

提案ペアが依頼したWCAG目標をまだ満たせないとき、プルリクエストからAPIを呼び、トークンを書き換えるか拒否します。

この色相のどの文字色でも目標に届かない場合は。

エンジンは黒か白のより良い方を返し、meets_target を false にします。7:1 を求めたときの一部の中間グレー背景で起こります。

読みやすい文字色の提案の料金はいくらですか。

ブラウザツールは無料で、お使いの端末で動きます。API要求は成功1件あたり $0.002 のKIT前払い残高を使い、無効な入力は課金されません。

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