CSSカラーコントラストチェッカーとは
CSSカラーコントラストチェッカーは、2色間のコントラスト比をWCAG基準でチェックします。 出力は公開サイトに使う前に確認しやすい形で表示されます。
Quick answer
Check whether two color combinations meet WCAG contrast standards before publishing. The tool calculates the precise ratio and tells you whether normal text, large text, and UI components pass AA or AAA levels.
Limitations
- The color picker returns hex values only. It does not support RGB, HSL, or named color inputs directly.
- The tool checks solid color pairs. It does not evaluate contrast on gradient text, box-shadow text, or background images where luminance varies across the element.
- Contrast ratios are calculated from the colors you enter. If either color is transparent the result will not reflect the actual visible contrast against the underlying page background.
使い方
- 必要な値を入力します。
- 結果パネルの出力を確認します。
- ページに合う部分だけコピーします。
- 公開前にブラウザとホスティング環境で確認します。
主な用途
- 公開前の繰り返し作業を短くする。
- マークアップ、CSS、チェックリストを準備する。
- 静的サイトで見落としやすい小さなミスを減らす。