WCAGカラーコントラストチェッカー&UIシミュレーター

アクセシビリティ準拠のための色の組み合わせをテスト。視覚的疲労をシミュレートし、UIがWCAG 2.2基準を満たしていることを確認。

コントラスト比
14.68:1
AAA (7:1) ✓
AA (4.5:1) ✓
AAラージ (3:1) ✓

リアルタイムUIプレビュー

ボタン
カード

カードタイトル

色の組み合わせが実際のカードコンポーネントでどのように見えるかを示すプレビューテキストです。

本文テキスト

これはプレビューテキストの例です。実際の本文テキストで、色の組み合わせがどのように見えるかを確認できます。

フォーム入力

視覚UIアクセシビリティシミュレーター

数字のみを表示する標準的なコントラストチェッカーとは異なり、私たちのツールは色の選択が 実際のUIコンポーネントでどのように機能するかをシミュレートします。テキスト、ボタン、フォームが読みやすいかどうかをすぐに確認できます。

アクセシビリティ基準(WCAG 2.2)

私たちは最新のWebコンテンツアクセシビリティガイドラインに従っています。通常のテキスト(レベルAA)には 4.5:1のコントラスト比が必要ですが、大きなテキストには少なくとも3:1が必要です。最高のアクセシビリティ 基準(AAA)には、7:1のコントラスト比を目指してください。

視覚的疲労とぼやけのシミュレーション

コントラストが低いと、視覚障害、色覚異常、または明るい日光下でサイトを閲覧するユーザーにとって さらに困難になります。私たちのシミュレーターは、ユーザーが気づく前にこれらの潜在的な問題を確認するのに役立ちます。

よくある質問

テキストのコントラスト比の合格基準は?

WCAG 2.2では、通常のテキスト(レベルAA)に少なくとも4.5:1のコントラスト比が必要です。 大きなテキスト(18ptまたは14pt太字)の場合、最低3:1です。私たちのツールは視覚的疲労を シミュレートし、ギリギリ合格と快適に読めることの違いを確認するのに役立ちます。

WCAGコントラスト基準とは?

WCAGは、通常のテキストコントラストとして少なくとも4.5:1を推奨しています。私たちのシミュレーターは、 異なる照明条件と視覚的疲労が可読性にどのように影響するかを数字以上に示すことができます。

よい色は見つかりましたか?色の関係を探索するには、こちらを使用:

インタラクティブカラーホイール