カラー変換
HEX、RGB、HSL、HSLa、HWB、OKLCH、OKLab、またはCSSの色名など、任意のCSS色を入力するとすべての等価な値と白・黒に対するWCAGコントラスト比を即時表示します。
アップロードなし・すべての処理はこのブラウザで実行
コントラスト(WCAG 2)
| 白背景の文字 | 黒背景の文字 | |
|---|---|---|
| コントラスト比 | ||
| AA 大きな文字 (3:1) | ||
| AA 通常の文字 (4.5:1) | ||
| AAA 通常の文字 (7:1) |
よくある質問
OKLCHとは何ですか?
人の目に均等に感じられる色空間で、明度・彩度・色相によって色を表す方式です。明度だけを変えても色味が保たれるためデザインシステムに便利で、最新のブラウザはすべてCSSで対応しています。
CMYKが近似値なのはなぜですか?
実際の印刷色は用紙・インク・ICCプロファイルによって変わります。このツールはプロファイルなしの簡易計算なので、正確な値は印刷会社に確認してください。
どのカラー形式を入力できますか?
HEX(#fff、#ffffff、#ffffffff)、rgb()、rgba()、hsl()、hsla()、hwb()、oklch()、oklab()、およびtomatoやrebeccapurpleのようなCSSの色名がすべて使えます。
WCAGコントラストチェックは何を示しますか?
入力した色と純白・純黒とのコントラスト比を示し、WCAG 2のAA基準(通常テキスト4.5:1、大テキスト3:1)およびAAA基準(通常テキスト7:1)の合否を表示します。
オフラインで使えますか?
はい。変換にはブラウザ内蔵のCSSカラー解析ロジックだけを使うため、ページが読み込まれれば通信不要で動作します。