🧰業務効率化
カラーコード変換・コントラストチェック
HEX・RGB・HSL変換と文字の見やすさを確認
- ✓ 無料
- ✓ 登録不要
- ✓ ブラウザだけで動作
- ✓ データ送信なし
ファイルや入力内容は、原則としてお使いのブラウザ内で処理されます。
文字色と背景色を選ぶと、HEX・RGB・HSLの値、実際の見え方、コントラスト比を同時に確認できます。入力値はブラウザー内だけで処理し、送信・保存しません。
1. 文字色と背景色を選ぶ
2. 見え方とコントラストを確認
読みやすい配色か確認します
通常サイズの文章サンプルです。ボタン、説明文、商品情報など、実際に近い文字サイズでも確認してください。
通常テキストは4.5:1以上、大きなテキストは3:1以上がWCAG 2.2のレベルAAの目安です。AAAは通常7:1以上、大きな文字4.5:1以上です。ロゴ・装飾など例外があり、文字サイズや太さの条件も確認してください。
3. カラーコードを変換・コピー
判定するときの注意
- このツールは不透明なsRGBカラー2色を計算します。透明色、グラデーション、背景画像は実際の表示箇所で確認してください。
- コントラストが基準を満たしても、文字サイズ、書体、行間、色だけに依存しない情報設計など別の確認が必要です。
- ブラウザーやディスプレイによって色の見え方は異なります。実機でも確認してください。