◩
画像・デザインツール
Contrast Checker
Contrast Checker は入力をサーバーへ送らず、ブラウザ上で確認、変換、結果作成を行うツールです。
画像・デザインツール
Input / output
Aa Sample
Text contrast preview
WCAG result
21:1
Recommended color: #000000
Normal text AA
>= 4.5:1
Pass
Normal text AAA
>= 7:1
Pass
Large text AA
>= 3:1
Pass
Large text AAA
>= 4.5:1
Pass
UI component / non-text 3:1
>= 3:1
Pass
CSS code
.sample {
color: #000000;
background: #FFFFFF;
}HelpOpen usage notes, examples, practical tips, and FAQ only when you need them.
What is this tool?
Contrast Checker は 画像とデザインのワークフロー のためのブラウザ内ツールです。入力、設定、結果を 1 ページで扱えます。
How to use it
- 入力を貼り付ける
処理したい値を入力エリアに入力または貼り付けます。
- オプションを調整する
contrast, WCAG, accessibility に合うモード、形式、単位を選びます。
- 結果を確認する
ツールを実行し、内容を確認してからコピーまたはダウンロードします。
Examples
Contrast Checker の例
- Input
- サンプル入力
- Output
- ブラウザで確認した出力。
Practical tips
- 大きな入力はまず小さなサンプルで試してください。
- 広告は入力、操作、結果エリアの外に配置されます。
FAQ
Contrast Checker には何を入力しますか？
画面のタスクに合う値を入力し、実行前にオプションを確認してください。
Contrast Checker の結果はコピーできますか？
はい。結果を確認してからコピーまたはダウンロードできます。
Contrast Checker はモバイルで使えますか？
はい。入力、設定、結果は小さな画面でも使いやすく並びます。
入力はサーバーに送信されますか？
いいえ。入力はブラウザ内で処理される設計です。