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

アクセシビリティを確保するために、前景色と背景色のコントラスト比をテストします。

1.00:1
コントラスト
Fail
非常に低い

通常のテキスト

AA (4.5:1)
AAA (7:1)

大きいテキスト

AA (3:1)
AAA (4.5:1)
Black
#000000
Black
#00ff45

クイックフィックス

Aa

プレビュー・タイトル

素早い茶色の狐は怠け者の犬を飛び越える

小さいテキストの例(12px)

テキスト
#000000
背景
#00ff45

WCAG基準

Level AA

コントラスト比は、通常のテキストで最低4.5:1、大きなテキストで最低3:1。ほとんどのウェブサイトに必要。

Level AAA

コントラスト比は、通常のテキストで7:1、大きなテキストで4.5:1に強化されている。最適なアクセシビリティのために推奨される。

すべての文字サイズに対してコントラストが不十分 - WCAG基準に適合していない。

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

文字色と背景色のコントラスト比を計算します。

テキストと背景色のカラーピッカーで色を選択するか、16進数のRGB形式(例: #259, #2596BE)で色を入力してください。スライダーで色を調整することも可能です。ウェブコンテンツ・アクセシビリティ・ガイドライン(WCAG)では、テキストの可読性を判断するための基準が定められています。この基準は、色の組み合わせを特定のアルゴリズムで評価し、コントラスト比を算出します。WCAGによると、通常のテキスト(本文)では4.5:1以上、大きなテキスト(18pt以上、または14pt以上の太字)では3:1以上のコントラスト比が推奨されています。

主な特徴

  • リアルタイムのコントラスト比計算
  • WCAG AA & AAA コンプライアンス・チェック
  • 微調整用のHSLスライダー
  • 複数のプレビュー形式

高度なツール

  • 自動カラーフィックス
  • テキストと背景のサンプル
  • 色名検出
  • 結果をエクスポートする