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

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

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

通常のテキスト

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

大きいテキスト

AA (3:1)
AAA (4.5:1)
White
#ffffff
Black
#e24826

クイックフィックス

Aa

プレビュー・タイトル

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

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

テキスト
#ffffff
背景
#e24826

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で適切であり、大きなテキスト(通常サイズで18ポイント以上、または太字サイズで14ポイント以上)の場合は、少なくとも3:1の色コントラスト比が必要であると述べています。

主な特徴

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

高度なツール

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