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

使用方法

カラーコントラストチェッカーの使い方

01
文字の色を選択してください
前景色を選択または入力します。
02
背景を選択してください
背景色を選択または入力します。
03
比率を読む
コントラスト比と AA/AAA の結果を参照してください。
04
調整する
合格するまで色を微調整します。

ユースケース

一般的な使用例

—UI テキストが WCAG のアクセシビリティを満たしていることを確認する
—ボタンとリンクのコントラストを確認します
—ブランドのカラーパレットを監査する
—コントラストの低いマーケティングコピーを修正

概要

誰でも読めるテキストにしましょう

低コントラストのテキストは、アクセシビリティに関する最も一般的な問題の 1 つです。このチェッカーは、公式の WCAG 相対輝度公式を使用してテキストと背景色の正確なコントラスト比を計算し、それが AA (通常のテキストの場合は 4.5:1、大きいテキストの場合は 3:1) と、より厳格な AAA (7:1 および 4.5:1) に合格するかどうかを示します。ライブプレビューには、選択した色の実際のテキストが表示されます。

好きなように色を入力してください

カラーピッカーを使用するか、16 進コードと rgb() 値を直接入力します。ツールは両方を解析します。どちらかの色を調整すると、比率と合格/不合格のバッジが即座に更新されるため、適合するまで色合いを微調整できます。すべてがローカルで実行されるため、UI、テーマ、マーケティングページを設計する際の迅速なコンパニオンになります。

特徴

01: WCAG AA および AAA の合否結果
02: ライブコントラスト比の計算
03: カラーピッカーを備えた 16 進数および RGB 入力
04: カラーのライブテキストプレビュー
05: 通常および大きいテキストのしきい値
06: ブラウザでローカルに実行

よくある質問

WCAG に合格するにはどのようなコントラスト比が必要ですか?+

AA の場合、通常のテキストには 4.5:1、ラージテキストには 3:1 が必要です。より厳格な AAA の場合、通常のテキストには 7:1、ラージテキストには 4.5:1 が必要です。大きなテキストはおよそ 18 ポイント、または 14 ポイントの太字になります。

コントラスト比はどのように計算されますか?+

両方の色に対して WCAG 相対輝度公式を使用し、明るい方の輝度 (プラス 0.05) を暗い方の輝度 (プラス 0.05) で割って、1:1 ～ 21:1 の値を求めます。

16 進数だけでなく RGB も入力できますか?+

はい — #1e293b や rgb(30, 41, 59) のような 16 進コードを入力するか、カラーピッカーを使用します。どちらの形式も即座に解析されます。

無料ですか？+

はい、サインアップなしで完全に無料で、完全にブラウザーで実行できます。