画像・デザイン
カラーコードチェック
HEX・RGB・HSLを相互確認し、文字色とのコントラスト比も判定します。
カラーコードと読みやすさを確認
HEX・RGB・HSL形式を入力できます。WCAGのコントラスト基準も目安表示します。
読みやすさをプレビュー暮らしに役立つ情報を、迷わず確認できます。
背景 HEX#2563EB
文字 HEX#FFFFFF
コントラスト比5.17 : 1
通常文字 WCAG AA合格
大きな文字 AA ✓通常文字 AA ✓通常文字 AAA ×
カラーコードチェックを正しく使うために
背景色と文字色を指定し、見た目とコントラスト比を同時に確認できます。HEX・RGB・HSLの入力に対応し、通常文字と大きな文字におけるWCAGの読みやすさ基準を目安表示します。
カラーコードチェックの使い方
- 01
背景色と文字色をカラーピッカーまたはコードで入力します。
- 02
プレビューで実際の文字の見え方を確認します。
- 03
コントラスト比とAA・AAAの判定を見て配色を調整します。
確認できること
- 統一したHEX値
- 異なる形式で入力した色を6桁のHEXカラーへ変換して表示します。
- コントラスト比
- 2色の相対輝度から1:1〜21:1の範囲で算出します。
- 基準判定
- 大きな文字AAは3:1、通常文字AAは4.5:1、通常文字AAAは7:1を目安に判定します。
計算・処理の仕組み
sRGBの各チャンネルを線形化して相対輝度を求め、明るい色と暗い色の輝度差からコントラスト比を計算します。判定値はWCAGの代表的な文字コントラスト基準を用いています。