コントラスト比
- AA 通常テキスト 4.5:1
- AA 大きなテキスト 3:1
- AAA 通常テキスト 7:1
- AAA 大きなテキスト 4.5:1
- UI 部品と図形 3:1
基準を満たす最も近い色
保存した色
カラーコントラストチェッカー
デザインを公開する前に、文字が背景の上で読みやすいか確認しましょう。文字色と背景色を選ぶか入力すると、WCAG 2.x のコントラスト比と、通常テキスト、大きなテキスト、UI 部品それぞれの AA と AAA の合否が表示されます。ライブプレビュー、色覚シミュレーション、修正の提案で、うまくいく組み合わせを見つけられます。 文字色と背景色を HEX、RGB、HSL で選びます。WCAG のコントラスト比、AA と AAA の結果、プレビューは入力と同時に更新され、基準を満たす最も近い色が提案されます。すべてこのブラウザーに保存されます。
使い方
- 文字色と背景色を選ぶか、HEX、RGB、HSL で入力します。文字が半透明なら文字の不透明度を設定します。
- コントラスト比と、通常テキスト、大きなテキスト、UI 部品の AA と AAA のバッジを確認し、ライブプレビューを見ます。
- 不合格なら提案された色を適用し、良い組み合わせをパレットに保存して、CSS をプロジェクトにコピーします。
点数だけでなく修正案も
組み合わせが不合格のとき、同じ色相と彩度のまま AA と AAA を満たす最も近い文字色と背景色を探し、ワンクリックで適用できます。半透明の文字は、ブラウザーの描画と同じように、まず背景と合成されます。
プライベートで持ち運べる
色とパレットはこのブラウザーにだけ保存されます。すべてを JSON で保存してバックアップや別の端末への移行ができ、結果を PDF や画像として保存することもできます。元に戻すとやり直しはすべての変更に使えます。
よくある質問
カラーコントラストチェッカーは無料ですか？
はい。無料で、アカウントは不要、最新のブラウザーならどれでも動きます。
どのくらいの比率が必要ですか？
WCAG のレベル AA では、通常テキストは 4.5:1 以上、大きなテキストと入力欄の枠やアイコンなどの UI 部品は 3:1 以上が必要です。レベル AAA では通常テキストが 7:1、大きなテキストが 4.5:1 です。
4.48 は四捨五入で 4.5 なのに、なぜ不合格ですか？
WCAG の基準値は厳密です。4.48:1 は 4.5:1 未満なので、通常テキストの AA は不合格です。このツールは丸める前の値で比較するため、バッジは常に厳密です。
関連ツール
カラーコントラストチェッカーの背景
WCAG のコントラスト値の由来：4.5:1 と 7:1、sRGB から求める相対輝度、WCAG 2.1 で加わった UI 部品の 3:1 ルール、色覚特性、そして WCAG 3 に向けた APCA。
カラーパレットジェネレーター
ブラウザでカラーパレットを構築、ロック、シャッフル。HEX、CSS変数、JSON をコピー、PNG または SVG を書き出し、写真から色を抽出。
カラーホイール
インタラクティブなホイールで色を選び、補色、類似色、トライアドなどのパレットを生成し、HEX、RGB、HSL、HSV、CMYK をコピー。
グラデーションエディター
ブラウザで線形・放射状の CSS グラデーションを構築。カラーストップをドラッグし、角度を設定し、CSS、HEX、RGB、HSL、HSV、CMYK をコピー。
色についてもっと見る
画面と印刷で色がどう働くか。RGB、CMYK、HSL、16進、カラーホイール、グラデーション、コントラスト、そして PictorX のツール。
試してみますか？
ブラウザで PictorX を開きます。インストール不要、始めるのにクレジットカードも不要です。
エディターへ