カラー・グラデーション最終更新: 2026-08-26
WCAG コントラスト比チェック
クイック回答:Colour Contrast Checker は、ブラウザ内で 100% 完結して高速動作する完全無料のオンライン便利ツールです。個人情報やデータが外部サーバーへ送信されることは一切ありません。
コントラスト比：
17.85 : 1
適合 (PASS)Headline Preview (18pt+)
Live sample text demonstrating readability and visual contrast against selected background.
WCAG AA
Normal (≥ 4.5:1)
WCAG AA
Large (≥ 3.0:1)
WCAG AAA
Normal (≥ 7.0:1)
WCAG AAA
Large (≥ 4.5:1)
使い方と手順 WCAG コントラスト比チェック
1
カラーを選択・入力
カラーピッカーまたは HEX, RGB, HSL 値を入力します。
2
配色やグラデーションを調整
補色、類似色、またはグラデーションの方向・中間色を設定します。
3
CSS コードをコピー
Webサイトの実装にすぐ使える CSS コードをコピーします。
測定結果・指標の見方
コントラスト比 (Contrast Ratio)
文字と背景色の明度比（WCAG 2.1 アクセシビリティ基準 AA/AAA 判定）。
色空間 (Color Space)
HEX, RGB, HSL など色を数値で表現する規格方式。
主な特徴とメリット
HEX, RGB, HSL, HSV 間のリアルタイム双方向カラー変換
WCAG 2.1 AA/AAA 基準に準拠した文字コントラスト比の自動診断
美しい線形（Linear）・円形（Radial）CSS グラデーション生成
Web デザインに直結する CSS 変数およびカラーコードのワンクリックコピー
よくある質問 (FAQ)
WCAG コントラスト比チェック の仕組みとよくある質問
A:
WCAG 2.1 AA 基準では、通常の文字サイズで 4.5:1 以上、大きな文字で 3:1 以上が求められます。