色変換・コントラスト検証

このツールの役割

いつも一つに帰着する二つの仕事です。ある色を別の記法で必要とする — デザインファイルは一つを言い、スタイルシートは別を欲しがる。そして二つの色があり、一つ目のテキストが二つ目の上で読めるかを知る必要がある。だからこのページは二つの色を取り、それぞれをすべての形式で一度に示し、両者のコントラストを測ります。

すべてがブラウザ内で動きます。まだ公開されていないブランドのパレットについて、変換のためにサーバーへ送るべきものは何もありません。

五つの記法

どれも貼り付けられ、どれも返ってきます:

• HEX — 3・4・6・8 桁。短い形式は各桁を二重にするので、#f0a は #ff00aa を意味します。4 桁と 8 桁は最後の位置にアルファを持ちます。
• RGB — 3 つのチャンネルを数値かパーセントで。rgb(59, 130, 246) も rgb(59 130 246 / 50%) も受け付けます。このツールが書き戻すのはカンマ形式です。周りのほとんどのコードが今もそれを使うからです。
• HSL — 色相を度で、次に彩度と明度をパーセントで。色相は折り返すので、480 と -120 は有効で 120 と 240 を意味します。
• OKLCH — 明度・彩度・色相を、知覚的に均一な空間で。明度は 62.8% とも 0.628 とも書けます。
• CSS 名 — 148 個すべてで、rebeccapurple や各グレーの両方の綴りを含みます。名前は正確に一致するときだけ出力に示されます。

知っておく価値のある癖が一つ: HEX・RGB・OKLCH はどれも往復を変わらず生き延びますが、HSL はそうとは限りません。人が実際に読む精度 — 整数の度、パーセントの小数第 1 位 — で表示され、それでは 1670 万すべての sRGB の色を指定するには足りません。HEX を HSL に変えて戻すと、チャンネルが 1 動くことがあります。代わりの案は hsl(217.22, 91.19%, 59.8%) のような出力で、誰も貼り付けたくありません。誤差は目に見えるものをはるかに下回ります。

OKLCH が存在する理由

HSL は明度を記述しているように見えて、していません。その明度の数は光ではなく数の性質です。純粋な黄と純粋な青は HSL ではどちらも明度 50% です:

yellow  #ffff00   hsl 明度 50%    oklch 明度 96.8%
blue    #0000ff   hsl 明度 50%    oklch 明度 45.2%

黄がこの二つのうち明るいほうだと誰にでも分かり、OKLCH はそう言います。これは学問的な話ではありません: HSL の明度を一定に保って色相を回して作ったパレットが、はなはだ不揃いに見える色の集合を生む理由であり、OKLCH で同じ手を使うと家族のように見える集合を生む理由です。OKLCH で同じ明度の二つの色が、同じ背景に対してたいてい似たコントラストを持つ理由でもあります — HSL がまったく約束できないことです。

残る二つの数は彩度 — おおよそどれだけ色鮮やかか、グレーの 0 から — と度での色相です。HSL の彩度と違い、彩度は何かのパーセントではなく、だから使える最大値は明度と色相の両方に依存します。

色を表示できないとき

OKLCH はふつうの画面が生めるより多くの色を記述できます。彩度 0.4 で明度 70% を求めると、原理上は存在し sRGB のどこにもない緑を名付けたことになります。このツールはそうした色を範囲内にクランプし、黙って別の何かを返すのではなく、sRGB 外として印を付けます。

警告は、クランプが実際に得られる色を変えるときにだけ現れます。その区別は聞こえるより重要です。sRGB の赤は色域の境界のちょうど上にあるので、それについて公開された OKLCH 値は、小数第 4 位に丸めると、厳密にはほんのわずか外に落ちます — 1 万分の 2 ほどで、同じバイトに落ち、目に見えません。それについて警告すると、警告を無視するよう仕込むことになります。広色域のパレットの色は丸ごとのステップだけ外れます: Tailwind v4 の blue-500 は青チャンネルで可能な 255 のうち 261 を求め、sRGB の画面では本当に、求められた色ではありません。

コントラストと三つのしきい値

コントラスト比は二つの色の相対輝度を比べます。同一の二色の 1:1 から、白地に黒の 21:1 まで走り、それを超えるものはありません。WCAG 2.1 は三つのしきい値を定め、それらは互換ではありません:

• 本文テキストには 4.5:1 — 18pt 未満、または太字で 14pt 未満のもの。人が色が「コントラストに落ちる」と言うときに意味するのはこれです。
• 大きいテキストには 3:1 — 18pt 以上、または太字 14pt 以上。大きな字形はそれ自体でより多くの信号を運ぶので、基準が低くなります。
• コントロールと図形には 3:1 — 入力の枠線、セレクトの矢印、グラフの棒。WCAG 2.1 で加わり、広く見落とされます。人はテキストは確認しても、その周りの箱は決して確認しないからです。

AAA は最初の二つを 7:1 と 4.5:1 に上げます。本文で目指す価値があり、ブランドのパレットで達成するのは本当に難しいです。規制と監査が求めるのは AA です。

それらの規則のポイントサイズは、ピクセルではなく CSS ポイントです: 既定の設定で 18pt は 24px、14pt は約 18.7px です。20px の見出しが大きいテキストに当たると思い込みやすいですが、当たりません。

半透明の色

不透明な背景の上の半透明のテキストは、申し分なく明確に定義されたコントラスト比を持ちます: ブラウザは塗る前に二つの色を混ぜ、このツールもそうします。不透明度 60% のグレーのテキストは、着地すればただの明るいグレーで、着地したものとして測られます。アルファチャンネルを無視するツールは、誰かが見る色ではなくあなたが書いた色の比を報告し、常にそれを過大評価します — あなたに有利に誤るアクセシビリティチェッカーは、ないより悪いです。

半透明の背景は別の状況で、このツールはそれを拒みます。透けて見えるものは下にあるものに依存し、それはこのページの二つの色が答えられることではありません。背景を実際に合成される色に解決し、それを測ってください。

比が教えないこと

合格する比は下限であって判定ではありません。それが覆わない三つのこと:

• 色覚特性。同一の輝度の赤と緑は 1:1 近くのコントラスト比を持ち、誰にとっても見分けられません — しかし二つの色が比に合格しても、なお二つの状態を分ける唯一のものでありえて、それは両者を見分けられない人には失敗します。決して色相だけに意味を担わせないでください。
• 細い字。式はストロークの太さについて何も知りません。4.5:1 の極細のウェイトは、4:1 の通常のウェイトより読みにくいことがあります。
• 式そのもの。WCAG 2 のコントラストは、暗い背景の上の明るいテキストに厳しいことが知られており、読める印象より高い比を報告します。WCAG 3 に向けて草案された APCA はこれをよりよくモデル化します — が、規範ではなく、まだどの監査も受け付けず、食い違う二つのスコアを示しても誰の助けにもなりません。だからここで論じ、上には表示しません。

自分のコードと結果を比べる人への実装上の注記が一つ: 輝度の式はしきい値 0.03928 を使い、これは現行の sRGB 定義の 0.04045 とごくわずかに異なります。WCAG が古いほうの値を引くので、ここで使うのはその値です。仕様に合わせることが内部で整っていることより重要で、その差が合格を不合格に変えることは決してありません。