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色とオプションのプレビューテキストがこのブラウザのタブで処理されます. コンバーターはそれを受け取ったり保存したりしません; ページを閉じたり再ロードしたりすると、ツールが現地ダウンロードを明示的に提供しない限り、作業状態が明らかになります。
このツールをどのように使うか
- ツールコントロールに2つの有効なCSS色とオプションのプレビューテキストを提供します。
- WCAG AA と AAA が通過する対比比率に影響を及ぼす設定を選択したり、指標が失敗した場合、ツールを実行します。
- WCAG AA と AAA が通過するか、コピーまたはダウンロードする前に失敗した指標との対比比率を検討します。
一般的な失敗モード
欠陥の色は測定できないし、透明性が解決した背景なしでは、比率を意味のないものにすることができます。
役に立つ例
#fffff で #1f2937 テキストを比較して、通常と大テキスとの比率を検討します。