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

WCAG 2.1ガイドラインに従って、テキストと背景色のコントラスト比を評価します。アクセシブルな色の調整を即座に生成します。

HEX/RGB/HSL
HEX/RGB/HSL
すべてブラウザでローカルに実行されます。

ライブテキストプレビュー

大見出し (18pt 太字 / 24pt 標準)

これは大見出しテキストスタイルのプレビューです。


通常テキスト (18pt未満)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.セド・ベル・マッサ・レクトゥス。

コントラスト比

18.6:1

WCAG 2.1準拠ステータス

WCAG AA要件
通常テキスト (4.5:1) PASS
大サイズテキスト (3.0:1) PASS

WCAG AAA要件
通常テキスト (7.0:1) PASS
大サイズテキスト (4.5:1) PASS

WCAG 2.1ガイドライン

Section 508、ADA、およびWCAG AAまたはAAAガイドラインに準拠したアクセシブルなインターフェースを構築するために、コントラスト基準を簡単に検証します。

提案エンジン

HSL座標に沿って色を段階的に自動調整し、コントラスト比の基準を満たす最も近い代替色を見つけます。

完全クライアントサイド

計算はブラウザ内でローカルに実行されます。色、ファイル、またはテレメトリ座標が当社のサーバーに送信されることはありません。

関連カラーツール

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

前景色と背景色のWCAGコントラスト比を計算し、一般的なテキストサイズの結果を表示します。

入力
2つの有効なCSS色とオプションのプレビューテキスト.
出力
WCAG AA および AAA の合格または不合格の指標を含むコントラスト比.
実際の制限事項
計算は輝度コントラストのみをカバーします。フォントレンダリング、モーション、フォーカス、または色以外の手がかりについてインターフェースを認定したり説明したりするものではありません。
プライバシーとデータ処理
2つの有効なCSS色とオプションのプレビューテキストがこのブラウザタブで処理されます。Convertr はそれを受け取ったり保存したりしません。ツールが明示的にローカルダウンロードを提供しない限り、ページを閉じたり再読み込みすると作業状態がクリアされます。

このツールをどのように使うか

  1. ツールコントロールに2つの有効なCSS色とオプションのプレビューテキストを提供します。
  2. WCAG AAおよびAAAの合格または不合格インジケーターとコントラスト比に影響を与える設定を選択し、ツールを実行します。
  3. コピーまたはダウンロードする前に、WCAG AAおよびAAAの合格または不合格インジケーターを含むコントラスト比を確認します。

一般的な障害モード

無効な色は測定できず、透明度が解決された背景なしでは比率が意味をなさなくなる可能性があります。

便利な例

#ffffff で #1f2937 テキストを比較して、通常テキストと大テキストのコントラスト比を確認します。