視覚的階層
いろはにほへと。可読性はアクセシビリティにとって不可欠です。
コントラストチェッカーは、前景色と背景色の輝度差を測定するアクセシビリティツールです。コントラスト比を計算し、カラーコンビネーションがWCAG 2.1基準を満たしているかを評価します。Color Tasteのコントラストチェッカーは、AAおよびAAAレベルに対する即時の合格/不合格結果と、要件を満たさない場合の自動修正提案を提供します。
色がWCAG AA基準を満たしているか確認：通常テキストは4.5:1、大きなテキストとUIコンポーネントは3:1。
より厳格なAAA基準に対してチェック：通常テキストは7:1、大きなテキストは4.5:1。
通常テキスト、大きなテキスト（18pt以上）、ボタン、入力枠、アイコン、その他のUI要素のコントラストをテスト。
テキスト/前景色をHEX、RGB、HSL形式で最初の入力フィールドに入力または貼り付けます。
2番目のフィールドに背景色を入力します。ライブプレビューがリアルタイムで更新されます。
コントラスト比が自動計算されます。緑のチェックマークは合格、赤いバツ印はWCAGレベル不合格を示します。
組み合わせが不合格の場合、自動修正提案をクリックして、デザイン意図を維持しながら色を調整します。
AAおよびAAA基準の両方に対する合格/不合格結果をリアルタイムで取得。
コントラスト不合格時に、アクセシビリティ要件を満たすために色を最小限に調整するスマートな提案を受け取ります。
異なるテキストサイズのリアルタイムプレビューで、背景色上でのテキストの見え方を正確に確認。
好みのカラーフォーマットで作業可能。チェッカーがすべての変換を自動処理します。
デザインプロセス中にアクセシビリティを検証。
コードリリース前にコントラストを検証。
トークンパレットがWCAG基準を満たしていることを確認。
大規模にコントラスト問題を監査・修正。
WCAG 2.1は、コンテンツタイプと準拠レベルに応じて最小コントラスト比を定義しています：
通常テキストは4.5:1、大きなテキスト（18ptまたは14pt太字）は3:1。最も一般的な準拠目標です。
通常テキストは7:1、大きなテキストは4.5:1。最大アクセシビリティのゴールドスタンダード。
ボタン、入力枠、アイコン、および意味を伝えるグラフィカル要素には最低3:1。
WCAG AAの場合：通常テキストは最低4.5:1、大きなテキスト（18ptまたは14pt太字）は最低3:1、非テキストUIコンポーネントは最低3:1が必要です。
AAAはより厳格な基準です：通常テキストは7:1、大きなテキストは4.5:1。ほとんどのデザインシステムはAAを最低基準とし、AAAを重要なコンテンツの目標としています。
はい。Color TasteのコントラストチェッカーはHEX、RGB、HSLカラーフォーマットを受け付けます。任意の形式で色を入力すると、ツールが自動的に変換処理を行います。
カラーコンビネーションが不合格の場合、Color Tasteは元のデザイン意図にできるだけ近い、WCAG要件を満たす調整色を提案します。提案をクリックして即座に適用できます。
はい、Color Tasteのコントラストチェッカーは完全無料です。サインアップ不要、透かしなし、使用制限なし。必要なだけいくつでもカラーコンビネーションをチェックできます。