色アクセシビリティ確認
前景/背景色を変換し、WCAGコントラストレポートをコピーして、公開前にCSS tokenと視覚アセットを確認します。
- 1. Color
HEX/RGB/HSLの組み合わせを変換し、AA/AAA基準を確認してアクセシビリティレポートをコピーします。
- 2. CSS
変更をcommitする前にCSS token名、selector、重複色値を確認します。
- 3. Favicon
ブランド頭文字や小さいアイコンが選んだ背景で明確に読めるか確認します。
Color色プライバシー: ブラウザ内処理
Color 変換ツール
HEX、RGB、HSL の色を相互変換し、実際の前景/背景の組み合わせで WCAG コントラストを確認します。
入力 / 出力
まずツールを使う
入力、出力、コピー操作をこの領域にまとめています。例と確認項目は下に分けています。
ローカルセッション
入力状態はこのブラウザだけに保存され、アカウントなしで前回の作業を復元できます。
結果のあとに確認
基本の入力/出力が終わってから、必要な例、確認リスト、関連ツールだけを開きます。
3 ツール
CSSスニペットをレビュー
CSSスニペットを整形し、CSSレビューレポートをコピーして、圧縮と色コントラストを確認します。
- 1. CSS
スニペットを整形し、selector、token、cascade、specificity、checklistを含むレポートをコピーします。
- 2. CSS Min
圧縮CSSを共有する場合は、圧縮率、コメント削除、minifyレビューレポートを確認します。
- 3. Color
スニペットが前景/背景色を変える場合は、color tokenをWCAGコントラスト基準で確認します。
Wi-Fi QRを作成
互換性のあるネットワークパスワードを作り、Wi-Fi payloadを組み立て、スキャンレポートとコントラストを確認します。
- 1. Password
ルーターのポリシーに合うパスワードを生成します。
- 2. QR Code
Wi-Fi payloadを作り、QR画像をダウンロードし、引き継ぎ用スキャンレポートをコピーします。
- 3. Color
印刷前に前景色と背景色のコントラストを確認します。
コピー前の確認
- 実際のUIの前景と背景の組み合わせで再確認します。
- AA通常テキスト、AA大きいテキスト、AAA通常テキストの基準を分けて見ます。
- Color 変換ツール の結果が次の作業に合うか関連ツールで続けて確認します。
よくある失敗例
- コントラスト比が通っても、実際の文字サイズ、太さ、状態が違うと読みにくい場合があります。
- 透明度、オーバーレイ、背景画像は計算上の前景/背景コントラストを変えます。
関連ツール
Clampresponsive font-size と spacing 向けの CSS clamp() を min/max 範囲から生成します。次の手順: responsive font-size と spacing 向けの CSS clamp() を min/max 範囲から生成します。CSS Unitpx、rem、em、percent を CSS layout と typography 計算向けに変換します。次の手順: px、rem、em、percent を CSS layout と typography 計算向けに変換します。Faviconアイコン素材と色を整理し、favicon link、manifest hint、ブラウザータブ表示を確認します。次の手順: アイコン素材と色を整理し、favicon link、manifest hint、ブラウザータブ表示を確認します。
ガイド
結果のあとに確認
基本の入力/出力が終わってから、必要な例、確認リスト、関連ツールだけを開きます。
例
このツールを始めるための入力例#2563eb on #ffffffrgb(24,24,27) on #fafafahsl(220 90% 56%) on hsl(0 0% 100%)利用シーン
色- HEX、RGB、HSL の色を相互変換し、実際の前景/背景の組み合わせで WCAG コントラストを確認します。
- ブラウザ内処理で入力を扱い、コピー前に結果を確認します。
- Color 変換ツール と関連ツールを続けて使い、作業フローを短くします。
- 実際のUIの前景と背景の組み合わせで再確認します。
- AA通常テキスト、AA大きいテキスト、AAA通常テキストの基準を分けて見ます。
- Color 変換ツール の結果が次の作業に合うか関連ツールで続けて確認します。