カラーコントラストチェッカー (WCAG)
前景色と背景色の組み合わせがWCAG AAおよびAAAアクセシビリティ基準を満たしているかチェックします。
スタジオ · ニュートラル環境
コントラスト比
—
: 1
AA · 本文 ≥ 4.5
AA · 大きな文字 ≥ 3.0
AAA · 本文 ≥ 7.0
AAA · 大きな文字 ≥ 4.5
ワンクリック修正 · 色相を維持
機能
コントラスト比を表示
WCAG AA・AAA の判定
テキストをリアルタイムでプレビュー
通常テキストと大きいテキスト
使い方
1. 文字色と背景色を設定すると、見本と WCAG 判定がリアルタイムに更新されます。
2. 見本(文字見本 / 記事 / インターフェース)を切り替えて実際の使用場面で確認できます。S キーで 2 色を入れ替えます。
3. 基準を満たさない場合はワンクリック修正を使えます — 色相を保ったまま明度だけを調整します。WCAG レポートのコピーも可能です。
このツールについて
文字と背景の明るさが近すぎると、誰にとっても読みにくく、人によってはまったく読めません。ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)は、2色の相対輝度にもとづく 1:1 から 21:1 までのコントラスト比でこれを測ります。レベル AA では本文に 4.5:1 以上、大きな文字(24px、または約 18.66px の太字)に 3:1 以上が求められ、AAA ではそれぞれ 7:1、4.5:1 に引き上げられます。このチェッカーはコントラスト比をリアルタイムで計算し、4つの基準すべての合否を表示し、実際の文字見本・記事・UI を描画して、配色を実際の使用場面で判断できるようにします。基準に届かない場合は、明度だけを変えて合格する最も近い文字色を提案します。
よくある質問
コントラスト比はどう計算されますか?
各色を WCAG 2 の sRGB の式で相対輝度に変換し、(L1 + 0.05) ÷ (L2 + 0.05) を計算します。L1 は明るいほうの色です。白地に黒は最大の 21:1、同じ色同士は 1:1 になります。
「大きな文字」とはどのサイズですか?
WCAG では、通常の太さで 18 ポイント(CSS で 24px)以上、または太字で 14 ポイント(CSS で約 18.66px)以上を大きな文字としています。文字が大きいほど読みやすいため、AA は 3:1、AAA は 4.5:1 で足ります。
AA に合格すればデザインはアクセシブルですか?
コントラストは多くの要件の1つにすぎません。細いフォント、写真の上の文字、小さすぎる文字、色だけで情報を伝える表現なども問題になり得るので、実際の画面で試し、ほかのアクセシビリティチェックと組み合わせてください。
提案される修正はどう決まりますか?
文字色の色相を保ったまま、明るくしたり暗くしたりして目標のコントラスト比に達する色を探します。その背景ではどの明度でも届かない場合はその旨を表示するので、背景色を変更してください。
アイコンやボタンにもコントラストの基準はありますか?
あります。WCAG 2.1 では、アイコン、入力欄の枠線、フォーカス表示などの意味を持つ文字以外の要素に 3:1 以上を求めています。純粋な装飾や無効状態のコントロールは対象外です。
関連ツール
カラーパレット生成
ベースカラーから調和のとれたカラーパレットを生成 — 補色、類似色、トライアド、スプリットコンプリメンタリーに対応。...
CSSグラデーション生成
CSSの線形、放射状、円錐グラデーションを視覚的に作成します。複数のカラーストップを追加してCSSをコピーできます。...
CSSボーダーラジアス生成
CSS border-radiusを視覚的に作成 — 4つの角を個別にまたは一括で制御できます。リアルタイムプレビュー付き。...
CSS Flexboxプレイグラウンド
CSS Flexboxを学習・実験できます。コンテナのプロパティを調整して、レイアウトの変化をリアルタイムで確認できます。...
CSSグリッド生成
CSSグリッドレイアウトを視覚的に作成します。行、列、間隔を設定して、生成されたCSSとHTMLをコピーできます。...
アスペクト比計算
アスペクト比を計算し、不足している寸法を求めます。16:9、4:3、21:9などの一般的なプリセット付き。...
パーセント計算
一般的なパーセント問題を解決:YのX%はいくつか、XはYの何%か、パーセント変化などに対応。...
電卓
加算、減算、乗算、除算に対応したシンプルなオンライン電卓。小数点、符号切り替え、パーセント、計算履歴機能付き。...