1.00:1
コントラスト
Fail
非常に悪い
通常のテキスト
AA (4.5:1)
✖
AAA (7:1)
✖
大きなテキスト
AA (3:1)
✖
AAA (4.5:1)
✖
White
#ffffff
Allports
#0076a3
クイック修正
Aa
プレビューテキスト
素早い茶色の狐が怠けた犬を飛び越える
小さなテキストの例 (12px)
テキスト
#ffffff
背景
#0076a3
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スライダー
- • 複数のプレビュー形式
高度なツール
- • 自動カラー修正
- • テキストと背景のサンプル
- • 色名検出
- • 結果のエクスポート