コントラスト比チェッカー(WCAG)

文字色と背景色のコントラスト比を計算し、ウェブアクセシビリティの基準(WCAG 2.1)で本文に使えるか(AA 4.5:1)、余裕があるか(AAA 7:1)、大きな文字だけなら使えるか(3:1)を判定します。2色で塗った見本の文で見え方をすぐ確かめられます。

色の変換

HEX
—
RGB
—
HSL
—

コントラスト比(WCAG)

この組み合わせでは文字がこう見えます

—

カラーパレット

このツールについて

使い方

  1. 1 文字色と背景色の欄に #HEX か rgb() を入れます。
  2. 2 コントラスト比がすぐ出て、下に AA・AAA の判定が付きます。
  3. 3 見本の文を見ながら、基準を超えるまで色を少しずつ変えてみます。

知っておきたいこと

  • ページ点検は貼り付けた HTML のみ — リンクをたどるには URL チェッカーを
  • YAML は広く使われる文法のみ読みます
  • JWT は中身を展開するだけで署名は検証しません

よくある質問

大きな文字は基準が違いますか?

違います。18pt(約24px)以上、または14pt 以上の太字は 3:1 で AA です。本文サイズは 4.5:1 が必要です。

ボタンやアイコンもこの基準ですか?

アイコンや入力欄の枠のようなグラフィック要素は、背景と 3:1 以上が基準です。

比率はどう計算していますか?

2色の相対輝度を求め、(明るい方 + 0.05)÷(暗い方 + 0.05)で計算します。WCAG が定める式そのままです。

Esc