API管理画面の配色はどう決める？技術情報を読みやすくする方法
API管理画面には、通信先の一覧、操作の種類、データの返り値、APIキーなど異なる技術情報が並びます。すべてを鮮やかに色分けすると、かえって重要な操作を見失うことがあります。この記事では架空の予約連携サービスを例に、文字・操作ラベル・コード・入力欄の役割を分け、必要な情報を読み取りやすくする配色を説明します。
技術情報は文字の読みやすさを先に確保する
API（アプリやサービス間でデータをやり取りするための仕組み）の管理画面では、画面全体の背景を淡い青灰色#F8FAFC、本文を濃いグレー#1F2937にすると、文字と背景のコントラスト比は約14.03:1です。コントラスト比は隣り合う色の明るさの差を表す数値です。補助説明を青灰色#475569にした場合も、背景#F8FAFCと約7.24:1あります。
一方、薄いグレー#94A3B8では同じ背景#F8FAFCとの比率が約2.45:1となり、小さな補足文には不足します。時刻や権限の説明も判断に必要な文字なので、目立たせすぎないことと読めることを両立させましょう。
WCAG 2.2（Web Content Accessibility Guidelines：WEBコンテンツを利用しやすくするための国際的な指針）のレベルAAでは、通常サイズの文字は原則4.5:1以上、条件を満たす大きな文字は3:1以上が必要です。また、入力欄や選択状態を識別するために必要な輪郭などには、隣接色との3:1以上が原則として求められます。文字と操作部品は別々に確認します。
予約APIの操作一覧とコード表示に色の役割を付ける
架空の予約API（予約情報を他のサービスとやり取りする窓口）では、/v1/bookingsなどのエンドポイント（通信先の経路）を一覧にします。通信の操作を表す「メソッド」は、色だけでなくGET・POST・DELETEの文字を必ず残します。以下は操作別の配色例です。
- GET（予約を取得）：淡い青#DBEAFEに濃い青#1E40AFで約7.15:1。
- POST（予約を登録）：淡い緑#DCFCE7に深緑#166534で約6.49:1。
- DELETE（予約を削除）：淡い赤#FEE2E2に濃い赤#991B1Bで約6.80:1。削除は色に頼らず操作名も明示します。
レスポンス（APIから返るデータ）の確認欄では、JSON（項目名と値を組み合わせるデータ形式）の例{"count":0,"items":[]}を表示するとします。コード欄の背景を暗い紺#0F172A、通常のコード文字を淡いグレー#E2E8F0にすると約14.48:1です。補足行に青灰色#94A3B8を使っても背景#0F172Aとは約6.96:1あります。コードそのものを色だけで区別せず、行の折り返しやコピー方法も用意します。
APIキー（接続を認証するための秘密の文字列）の欄は白#FFFFFFにし、入力欄を区別する輪郭に青灰色#64748Bを使う例があります。線と白#FFFFFFの比率は約4.76:1、外側の背景#F8FAFCとは約4.55:1です。キーの全文を常時表示せず、必要な人が意図して確認する操作を用意します。実際の秘密の値を説明用画面に載せないようにしましょう。
危険な操作・フォーカス・スマホ表示を点検する
「コピー」ボタンを青#1D4ED8の背景に白文字#FFFFFFで置くと、文字の比率は約6.70:1です。キーボードで操作している位置を示すフォーカス枠には濃い青緑#0F766Eを使い、ページ背景#F8FAFCと約5.23:1、白い入力欄#FFFFFFと約5.47:1の差を確保できます。枠線の太さや位置も確認し、操作中の場所が消えないようにします。
削除ボタンは赤色だけで危険性を伝えず、「予約を削除」と書き、対象と結果を確認してから実行できるようにします。カード背景を薄いグレー#F1F5F9にしても白#FFFFFFとの差は約1.10:1なので、重要な区画の区切りには見出しや輪郭を加えましょう。スマートフォンではエンドポイント名やコードが途中で読めなくならないよう、折り返し・横スクロールの扱いも確かめます。
HueRollではHEX（色を16進数で表すカラーコード）を入力し、選んだ色と白・黒とのコントラスト比を確認できます。ただし、任意の2色の比較やAA・AAAの自動判定には対応していません。今回のラベル・コード欄・入力欄のような組み合わせは別途計算し、完成した画面でも確認してください。