Slop Colors · 無料、ブラウザーで

WCAG に基づいて色のコントラストを確認

白地のグレーの文字はおしゃれに見えますが、読めなければ意味がありません。2 つの色を入力すると、Slop Colors が WCAG の比率、どの基準を満たすか、そして基準を満たす最も近い文字色を示します。

コントラストを確認

手順

1. 「コントラストの確認（WCAG 2）」まで下にスクロールし、文字色と背景色を HEX、RGB、HSL、OKLCH のいずれかで入力します。
2. 比率と、5 つの判定結果を読みます。通常の文字の AA と AAA、大きな文字の AA と AAA、UI 部品とグラフィックです。
3. サンプルを見ます。入力した 2 色による大きな文字と段落が表示されます。
4. 通常の文字の AA を満たさない場合は、「文字色を修正」をクリックします。文字色の色相は保ったまま、基準を満たすまで明るさ、または暗さだけを調整します。
5. 「入れ替え」をクリックすると、2 色を逆にして確認できます。

ファイルはこのデバイスに保存されたままです：Slop Colors はブラウザーで動作し、アップロードもアカウントも透かしも必要ありません。

よくある質問

WCAG はどの比率を求めていますか？

レベル AA では、通常の文字で 4.5:1、大きな文字（24 px、または太字で 18.66 px）と UI 部品およびグラフィックで 3:1 を求めます。レベル AAA では 7:1 と 4.5:1 を求めます。

なぜ 4.48 ではなく 4.47 と表示されるのですか？

WebAIM のチェッカーと同じく、比率は切り捨てて表示します。そのため、4.499 の組み合わせが 4.5 を満たしているように表示されることはありません。

画面上の色を確認できますか？

Chrome と Edge では、「画面から取得」で画面上の任意のピクセルの色を取得できます。その色を、パネルから文字色または背景色として使えます。

何かがアップロードされますか？

いいえ。色はお使いのブラウザーでページが確認するだけで、どこにも送信されません。

Slop Colors でほかにできること

• 画像から色を取得する
• 1 つの色から配色パレットを作成する
• HEX を RGB、HSL、OKLCH、CMYK に変換する

関連するアプリ

• PhotoSlop
  公開中
  Photoshopを、ブラウザー向けに作り直しました。
• SlopVector
  公開中
  Illustratorを、ブラウザー向けに作り直しました。
• SlopIsolate
  ベータ
  端末上で動くAIで、背景を除去します。