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

2色のコントラスト比を測り、本文・大きな文字・UI 要素について WCAG の AA と AAA を満たすかを判定します。

ブラウザ内だけで処理無料で利用

文字色

背景色

プレビュー

通常サイズの本文テキストです

大きな文字

ファイルはサーバーに送信されず、ブラウザ内だけで処理されます。

登録もインストールも不要、回数制限もなく無料で使えます。

文字色と背景色を入れると、比率と判定が同時に更新され、プレビューが2つの文字サイズでその組み合わせを見せます。

WCAG は対象ごとに基準が違います。本文は AA が 4.5:1、AAA が 7:1。大きな文字 — 18pt または太字14pt — はそれぞれ 3:1 と 4.5:1。枠線やアイコンなどの UI 要素は 3:1 です。

比率は四捨五入せず切り捨てます。4.499 を 4.50 と表示すると、基準に達していない組み合わせが通ったように見えます。丸め方が答えを変えてしまう唯一の場面です。

基準に届かない場合は代替色を提案します。黒や白に振り切るのではなく、元の色の明度だけを動かして基準を超える最も近い色を探すので、デザインの色相は保たれます。

色は16進表記（3桁の省略形を含む）または rgb() で書けます。

入力した値がサーバーに送られることはありません。ブラウザの中だけで計算されます。