コンテンツにスキップ
デザインとカラー

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

WCAG 2.1 AA および AAA に対して前景と背景のペアをチェックします。

ブラウザで実行100%プライベートアップロードはありません
ツールを読み込み中…

このツールを共有する

必要な人に送ってください。

Xfin
完全なガイドを読む

WCAG コントラスト チェッカー について

低コントラストのテキストは、Web 上で最も一般的なアクセシビリティの問題です。テキストと背景の色を入力すると、通常のテキスト、大きなテキスト、UI コンポーネントの正確なコントラスト比と合否判定が得られます。

使い方

  1. 1テキストと背景を設定するカラー入力を使用するか、デザイン トークンから hex 値を貼り付けます。
  2. 2比率を読むこのツールは、相対輝度とコントラスト比を小数点第 2 位まで計算します。
  3. 3修正して再テストするペアが失敗した場合は、合格するまで明度を調整し、その後、準拠する hex 値をコピーします。

なぜこの wcag コントラスト チェッカー を使用するのでしょうか?

  • デバイスからは何も残らない. 作業はブラウザのタブで行われます。このアプリにはアップロード エンドポイントがないため、ファイルやテキストを保存したり、ログに記録したり、当社が閲覧したりすることはできません。
  • アップロードの待ち時間なし. サーバーへの往復を完全にスキップします。結果は、ネットワーク速度やキュー サイズではなく、ご使用の CPU によって制限されます。
  • 無料、アカウントなし、割り当てなし. サインアップの壁、ウォーターマーク、1 日あたりの制限はありません。オプションのアカウントは、デバイス間でお気に入りとプリセットを保存するためにのみ存在します。

よくある質問

私のカラーペアはここで安全に使用できますか?

はい。このツールは、JavaScript を使用してブラウザ内で完全に実行されます。貼り付けたり開いたりした内容はサーバーに送信されず、ページを閉じた後もページのコピーは保持されません。

アカウントを作成する必要がありますか?

いいえ。すべてのツールはサインインしなくても完全に使用できます。アカウントは、保存されたお気に入りと再利用可能なプリセットを追加するだけです。

電話でも機能しますか?

はい。インターフェースはモバイルファーストで、大きなタッチターゲットと積み重ねられたレイアウトを備えているため、デスクトップだけでなく携帯電話やタブレットでも動作します。

WCAG ではどのような比率が必要ですか?

AA では、通常のテキストの場合は 4.5:1、大きなテキスト (18 ポイントまたは 14 ポイントの太字) の場合は 3:1 が必要です。 AAA では、これらが 7:1 および 4.5:1 に引き上げられます。非テキスト UI コンポーネントには少なくとも 3:1 が必要です。

色はうまく見えても失敗するのはなぜですか?

知覚される明るさは色相とは異なります。飽和した青と緑は見た目よりも輝度が低いことが多いため、見本を信頼するのではなく、常に実際のペアを測定してください。

ツールボックスの同じコーナーからさらに無料のユーティリティが入手できます。