無料の WCAG カラー コントラスト チェッカー。テキストと背景の色が AA および AAA のアクセシビリティに準拠しているかどうかを、ライブ コントラスト比とプレビュー (16 進数または RGB) でテストします。
ライブ プレビューと 16 進数または RGB 入力を使用して、WCAG AA および AAA 標準に対してテキストと背景色のコントラスト比を確認します。
低コントラストのテキストは、アクセシビリティに関する最も一般的な問題の 1 つです。このチェッカーは、公式の WCAG 相対輝度公式を使用してテキストと背景色の正確なコントラスト比を計算し、AA (通常のテキストの場合は 4.5:1、大きいテキストの場合は 3:1) と、より厳格な AAA (7:1 および 4.5:1) に合格するかどうかを示します。ライブ プレビューには、選択した色の実際のテキストが表示されます。
前景色を選択または入力します。
背景色を選択または入力します。
コントラスト比と AA/AAA の結果を参照してください。
合格するまで色を微調整します。
カラー ピッカーを使用するか、16 進コードと rgb() 値を直接入力すると、ツールは両方を解析します。どちらかの色を調整すると、比率と合格/不合格のバッジが即座に更新されるため、適合するまで色合いを微調整できます。すべてがローカルで実行されるため、UI、テーマ、マーケティング ページを設計する際の迅速なコンパニオンになります。
WCAG 2 は、1:1 (コントラストなし) から 21:1 (白地に黒) までの比率としてコントラストを測定します。通常の法律および業界のベースラインであるレベル AA では、通常のテキストの場合は少なくとも 4.5:1、大きなテキストの場合は 3:1、つまり 24 ピクセルの通常または約 18.66 ピクセルの太字以上が必要です。レベル AAA では、これらが 7:1 および 4.5:1 に引き上げられます。入力枠、フォーカス リング、意味を伝えるアイコンなどのユーザー インターフェイス パーツは、周囲に対して少なくとも 3:1 である必要があります。この比率は各色の相対輝度から計算されるため、異なって見える 2 つの色が同じ明るさであっても失敗する可能性があり、これは緑と赤の場合によく起こります。
ペアが失敗した場合は、色相ではなく明度を変更します。比率が合格するまでテキストを暗くしたり、背景を少しずつ明るくしたりしても、その色は依然としてあなたのブランドのように感じられます。中間のオレンジやティールなどの中間色のブランド カラーには、AA で白いテキストを含めることができないことがよくあります。その場合は、大きな見出し、枠線、背景にブランドカラーを使用し、本文テキストを濃い色に設定します。プレースホルダー テキストと無効な状態もテストしてください。これらは薄すぎることが多いためです。この比率は画像上の細いフォントやテキストを考慮していないため、そのような場合は余分な余白を残してください。
AA の場合、通常のテキストには 4.5:1、ラージ テキストには 3:1 が必要です。より厳格な AAA の場合、通常のテキストには 7:1、ラージ テキストには 4.5:1 が必要です。大きなテキストはおよそ 18 ポイント、または 14 ポイントの太字になります。
両方の色に対して WCAG 相対輝度公式を使用し、明るい方の輝度 (プラス 0.05) を暗い方の輝度 (プラス 0.05) で割って、1:1 ～ 21:1 の値を求めます。
はい: #1e293b や rgb(30, 41, 59) などの 16 進コードを入力するか、カラー ピッカーを使用します。どちらの形式も即座に解析されます。
はい、サインアップなしで完全に無料で、完全にブラウザーで実行できます。
テキストと背景の 16 進数値を入力します。チェッカーはコントラスト比を計算し、通常のテキストと大きなテキストについて WCAG AA および AAA に合格するかどうかを示します。
コントラストが低いと、弱視や色覚異常を持つ人にとってテキストが読みにくくなります。 WCAG 比率を満たすことで、コンテンツが誰にとっても読みやすくなり、アクセシビリティと SEO の共通要件となります。
Tool GuidesPhotos carry hidden data like GPS location and camera details. Here's why that matters for privacy and how to strip it before sharing.
Tool GuidesCPS means clicks per second. Here's how it's measured, what a good score looks like, and how to test your own click speed for free.
Tool GuidesCombine several PDFs into one document, reorder the pages, and keep everything private — no software and no server upload.