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

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

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

通常のテキスト

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

大きなテキスト

AA (3:1)
AAA (4.5:1)
White
#ffffff
Twilight
#e4cfde

クイック修正

Aa

プレビューテキスト

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

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

テキスト
#ffffff
背景
#e4cfde

WCAG基準

Level AA

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

Level AAA

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

すべてのテキストサイズに対してコントラストが不十分です - WCAG基準に不適合です。

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

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

テキストと背景色のためにカラーピッカーを使って色を選ぶか、RGBの16進数形式で色を入力してください(例: #259 または #2596BE)。スライダーを調整して色を選択できます。Webコンテンツアクセシビリティガイドライン(WCAG)には、視覚的に読みやすいテキストを判断するための特定のガイドラインがあります。この基準は、特定のアルゴリズムを使用して色の組み合わせを比較可能な比率にマッピングします。この公式を使用して、WCAGはテキストとその背景のコントラスト比が4.5:1であれば通常の(本文)テキストに適しており、大きなテキスト(18pt以上の通常、または14pt以上の太字)は少なくとも3:1のコントラスト比を持つべきであると述べています。

主な機能

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

高度なツール

  • 自動カラー修正
  • テキストと背景のサンプル
  • 色名検出
  • 結果のエクスポート