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

WCAG AA および AAA に対して前景/背景のコントラストを確認します。色を選択すると、比率が更新されるのを確認してください。

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

WCAG AA および AAA ガイドラインに照らして前景と背景のコントラストを確認します。
ブラウザで実行
無料で使用できます

使い方

テキスト (前景) と背景の色を選択します。
コントラスト比と AA/AAA の結果を読み取ります。
目標レベルを超えるまで調整してください。

How this tool works

テキスト (前景) と背景の色を選択します。
コントラスト比と AA/AAA の結果を読み取ります。
目標レベルを超えるまで調整してください。

Recommended settings

最初はデフォルトのオプションを使用し、必要に応じて調整します

Supported formats

Text / on-page input

File size and limits

非常に複雑なマルチレイヤーのプレビューは、古い携帯電話では遅く感じる場合があります。

Privacy

カラーおよび CSS ジェネレーターは完全にブラウザー内で実行されます。プレビューと変換ではスタイルがアップロードされることはありません。

Common use cases

必要に応じてカラーコントラストチェッカーを使用します。WCAG AA および AAA ガイドラインに照らして前景/背景のコントラストをチェックします。

Troubleshooting

貼り付け後のプレビューの見た目が変わる

ページ上に競合する CSS がないか確認します (リセット、継承された色)。まず、生成されたルールを分離されたスタイルシートにコピーします。

よくある質問

これで CSS がアップロードされますか?

いいえ。ジェネレーターとコンバーターは、ライブプレビューを使用してブラウザーで実行されます。

アカウントは必要ですか?

いいえ。ツールを開いてコントロールを調整し、CSS をコピーします。