カラーコード変換 — HEX・RGB・HSL・CMYK、明度コントラストチェック
デザイン案の色をCSSコードに書き出したり、ボタンの文字が読みやすいかをアクセシビリティ基準で確認するときに使います。
ファイルはサーバーに送信されません — この端末のブラウザ内でのみ処理
明度コントラストチェック (WCAG)
この色を文字色として使用した場合の背景とのコントラスト比です。本文 AA 4.5:1、AAA 7:1 / 大きな文字（24px、または太字18.7px以上）AA 3:1、AAA 4.5:1。
あいう Aa 123
白背景6.29:1
✓ AA 本文 ✗ AAA 本文 ✓ AA 大きな文字 ✓ AAA 大きな文字
あいう Aa 123
黒背景3.34:1
✗ AA 本文 ✗ AAA 本文 ✓ AA 大きな文字 ✗ AAA 大きな文字
あいう Aa 123
選んだ色 #FFFFFF6.29:1
✓ AA 本文 ✗ AAA 本文 ✓ AA 大きな文字 ✓ AAA 大きな文字
明るさ・暗さの段階
マスをクリックすると、HEXコードがコピーされます。
広告
色変換の使い方
- 1カラーコードを入力するか、カラーピッカーで選びます(#4f46e5、rgb()、hsl()すべて使用可能)。
- 2すべての形式のコードが表示され、クリックするとコピーされます。
- 3白・黒・自分で選んだ色とのコントラスト比、WCAG基準の合否、明るさ・暗さの段階を確認します。
よくある質問
コントラスト比はどのくらい必要ですか?
WCAG AAは本文の文字で4.5:1、大きな文字で3:1以上、AAAはそれぞれ7:1、4.5:1以上です。
CMYKの値が印刷会社と異なります。
ここでのCMYKは単純な数学的変換です。実際の印刷は用紙・インクのプロファイルによって変わるため、印刷会社の基準に従ってください。
広告