ツール
いろはにほへと
各種記法
- hex
#3b82f6- rgb
rgb(59 130 246)- hsl
hsl(217.2 91.2% 59.8%)- hwb
hwb(217.2 23.1% 3.5%)- oklch
oklch(62.3% 0.188 259.8)
コントラスト
いろ白背景の文字として3.68:1
いろ黒背景の文字として5.71:1
- WCAG 等級
- AA
- 読みやすい文字色
- 黒
- 相対輝度
- 0.2355
スタイルシートに含まれる可能性のあるあらゆる表記の色を読み取り、他のすべての表記に変換し、さらに黒と白に対するコントラスト比を表示します。OKLCHも含まれています。これは、明るいバリエーションや暗いバリエーションが実際に同じ色に見えるようにする表記法だからです。HSLはこの点で有名な欠点があります。同じ明度のHSLカラーでも、見た目の明るさが大きく異なることがあるからです。
動作のしくみ
- 入力は、hex、rgb()、hsl()、hwb()、CSS色名に対応しており、カンマ区切りと現代的なスペース区切りの両方の構文を受け付けます。
- コントラストはWCAG 2.1の比率で、グレードは本文テキストサイズの要素が獲得するものです。
- すべてはページ内で入力中に再計算されます。色が外部に送信されることはありません。
データの行き先
どこにも行きません。このツールは完全にブラウザ内で動作します。貼り付けたテキストはページが処理し、サーバーに送信されることも、ログに記録されることもありません。
ポイントを消費した実行は、後から探せるように一行の要約があなた自身の履歴に保存されます。保存されるのは実行の形——サイズ、件数、調べた値——であって、貼り付けた内容ではありません。
必要なポイント
このツールは無料です。ログインもポイントも必要ありません。
よくある質問
- HSLの明度が、色の見た目の明るさと一致しないのはなぜですか？
- HSLの明度は、最大チャンネルと最小チャンネルの単純な平均であり、人間の視覚のモデルではないからです。hsl(60 100% 50%)は黄色、hsl(240 100% 50%)は青ですが、どちらも明度50%と主張します。しかし、黄色は見た目で約6倍明るいです。OKLCHの明度は知覚的であるため、同じL値は色相に関係なく同じ明るさに見えます。
- 実際に必要なコントラスト比はどれくらいですか？
- 本文テキストには4.5:1、18ptまたは14ptの太字テキストには3:1でWCAG AAを満たします。AAAを満たすには7:1が必要です。意味を持つインターフェースコンポーネントやグラフィックには3:1が必要です。3:1未満では何も合格しません。
- 本番環境でOKLCHを使用できますか？
- はい。現在のすべてのブラウザがサポートしており、@supportsルールや先行するhex宣言の後ろで古いブラウザにもきれいにフォールバックします。特にカラースケールを生成する場合に切り替える価値があります。HSLでは不均一に見えるステップが生成されるからです。
背後にあるオープンソース
このツールは外部ライブラリを同梱しない独自実装です。Qix-/color-convert（MIT）はコードとして同じ仕事をします。自分のプログラムで同じことをしたいなら、Web ページを呼ぶのではなくそちらから始めてください。
Qix-/color-convert別の呼び方
- カラーコンバーター
- HEX to RGB
- RGB to HEX
- HSL 変換
- OKLCH 変換
- コントラストチェッカー
- WCAG コントラスト