WORK 03 / WCAG CONTRAST CHECKER

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

前景色と背景色を入力すると、コントラスト比とWCAG 2.2の適合目安をまとめて確認できます。

2色を入力

コントラストを確認する色

#RGBまたは#RRGGBB形式（例: #2563EB）

3桁または6桁のHEX色を入力してください。

3桁または6桁のHEX色を入力してください。

RESULT

WCAG 2.2 適合目安

5.16 : 1

  • AA・通常文字必要 4.5:1 以上
    ✓ 合格
  • AA・大きな文字必要 3:1 以上
    ✓ 合格
  • AAA・通常文字必要 7:1 以上
    × 不合格
  • AAA・大きな文字必要 4.5:1 以上
    ✓ 合格
  • UI部品・グラフィック必要 3:1 以上
    ✓ 合格

大きな文字の目安は、通常ウェイトで約24px以上、太字で約18.5px以上です。

配色プレビュー

大きな文字の見出し例

通常サイズの本文です。実際の配色で読みやすさを視覚的に確認できます。

UI部品の境界例

このツールについて

WCAG 2.2の2色間のコントラスト比を計算するツールです。通常文字、大きな文字、UI部品・グラフィックでは基準が異なります。

グラデーション、背景画像、半透明色、実際のフォント描画は評価しません。この結果だけでWebページ全体のWCAG適合を保証するものではありません。入力内容は保存または外部送信しません。