アクセシブルカラー生成

このツールでできること

• アクセシブルカラー生成では、前景色・背景色をHEXで指定するとWCAG 2.1のコントラスト比を自動計算。通常テキスト（AA 4.5:1／AAA 7:1）と大きい文字（AA 3:1／AAA 4.5:1）それぞれの合否をバッジで表示し、プレビュー文で実際の見え方も確認できます。
• 関連する観点として アクセシビリティ色、アクセシブルカラー生成、accessible color generator を確認し、結果をコピーして別の作業に使えます。

使い方

1. 「前景色」「背景色」にHEXカラーコード（例: #ffffff）を入力するか、カラーピッカーで選びます。
2. 入力した2色でテキストサンプルがプレビュー表示され、下にコントラスト比が数値とバーで表示されます。
3. 「WCAG適合状況」で通常テキスト・大きい文字（18pt以上）それぞれのAA/AAA合否がバッジで分かります。
4. 「色を入れ替え」ボタンで前景色と背景色を入れ替え、逆方向の組み合わせもすぐ確認できます。

入力例・出力例

よくある利用シーン

• Webサイトの本文色と背景色がWCAG AA基準（4.5:1）を満たすか公開前に確認したいとき。
• ボタンやバナーなど大きい文字（18pt以上）向けに、緩和されたAA基準（3:1）で妥協できるか判断したいとき。
• 配色案を複数比較し、AAAまで満たす高コントラストな組み合わせを選びたいとき。

結果確認のポイント

• 色空間、透明度、コントラスト、コピーしたコード形式が用途に合うか確認してください。
• アクセシビリティ色、アクセシブルカラー生成、accessible color generatorの観点で、入力内容と出力内容がずれていないか見直してください。
• コピーした結果を利用先に貼り付けたあと、改行や記号が変わっていないかも確認してください。

注意点

• 画面やOSの色管理により見え方が変わるため、最終判断は実機でも確認してください。
• 結果を公開・送信する前に、用途に合う形式かを必ず確認してください。

データの扱い / プライバシー

• アクセシブルカラー生成の主要な処理はブラウザ内で実行されます。
• 入力内容を保存するアカウント機能はなく、ページを閉じると作業内容は手元のブラウザから離れます。
• 本番の秘密情報や個人情報を扱う場合は、入力前に必要性を確認してください。

よくある質問

バリエーション

関連ツール