グレー文字は見た目で決めず、Leonardoで色コードのコントラストを確かめる（#777は白背景でギリギリ不合格）

どんな問題を解決するか / いつ使うか

UIや資料で本文・注釈のグレーを決めるとき。AIや人が「#777くらい」と感覚で置いた色が、実際には読めない／基準スレスレのとき。Adobeのオープンソース配色確認ツール Leonardo の Compare で前景・背景を入力する。

関連: 文字だけでなく、ボタンや入力欄の枠などUI部品にも背景との3:1のコントラストを確保する、Colorableで「読める2色」を見つけたら、AIに役割付きの資料配色ルールへ展開させる

具体手順

1. Leonardo の Compare（leonardocolor.io/）を開く。
2. 前景色と背景色を入力する。例では不透明度100%、AA設定。
3. 実測の目安（投稿時点の表示）: 白背景に #777777 は約 4.48（通常文字の4.5:1に少し届かない）。#767676 にすると約 4.54。
4. 境界近くで「丸めて合格」にせず、余裕のある配色も検討する。
5. WCAG AAの目安: 通常文字は4.5:1以上、大きな文字は3:1以上（例外あり）。写真・グラデーション・透過の上に載せる文字は、実際に重なる背景でも再確認する。

注意点

• LeonardoはAdobeの既存OSS。新製品の宣伝ではなく、制作時の確認用。
• 数値合格＝常に「読みやすい」ではない。写真上や半透明背景では別途確認。
• AIにグレーを指定させるときも、候補のhexをこの手順で機械確認させると安心。

出典

• @dezainaz_ceo · 2026-11-07（スレッド返信に手順・注意）
• @fujikururi が Colorable とあわせて紹介 @fujikururi · 2026-11-07