カラーコントラストチェッカー

カラー

前景色と背景色を選ぶと、正確な WCAG コントラスト比と、通常・大きい文字サイズでの AA・AAA の合否を即座に表示します。ライブプレビューで実際の組み合わせの見え方を確認できます。すべてブラウザ内で動作します。

—

前景色（文字）

背景色

コントラスト比

14.68:1

AA 通常✓ 合格

AA 大きい文字✓ 合格

AAA 通常✓ 合格

AAA 大きい文字✓ 合格

プレビュー

いろはにほへとちりぬるを

いろはにほへとちりぬるを

使い方

前景色（文字色）を選びます。
背景色を選びます。
コントラスト比と AA/AAA の結果を確認します。
ライブプレビューで読みやすさを確認します。

よくある質問

AA と AAA に必要な比は？: AA は通常テキスト 4.5:1、大きいテキスト 3:1。AAA はそれぞれ 7:1 と 4.5:1 です。
大きいテキストの基準は？: おおよそ 18pt（24px）以上、または 14pt（18.66px）の太字以上です。
比はどう計算しますか？: 各色の相対輝度を公式の WCAG 2 式で計算します。
アルファに対応していますか？: いいえ、不透明色を比較します。透明度がある場合は実際の背景と合成してから使ってください。

関連ツール

画像からカラーパレット抽出

画像をドロップすると Canvas で主要色を分析しパレット抽出 — HEX をコピーまたは一括取得。

色覚シミュレーター

8 種類の色覚異常（CVD）で画像がどう見えるかを再現。

CSS Box Shadow ジェネレーター

複数レイヤーで CSS box-shadow を視覚的にデザイン — リアルタイムプレビュー + CSS / Tailwind 出力。

カラーフォーマット変換

任意の色を HEX・RGB・HSL・HSV・OKLCH・CSS 変数で一括変換。

CSS グラデーションジェネレーター

線形・放射状 CSS グラデーションを多段カラーストップでデザインし、コードをコピー。

カラーパレットジェネレーター

基準色から 6 種類のスキームで調和の取れたパレットを作成。