カラーコントラストチェッカー — WCAG AA/AAA

カラー

カラーコントラストチェッカーは、文字色と背景色の相対輝度を比較して WCAG のコントラスト比と合否を計算するツールです。

AI支援翻訳をレビュー中

このページはAIの支援で翻訳され、まだ専門家によるレビューを完了していません。重要な判断の前に、引用元をご確認ください。

概要

ウェブアクセシビリティでは、文字と背景の色のコントラストが読みやすさを左右します。WCAG は通常テキストの AA 基準で 4.5:1、大きなテキストの AA 基準で 3:1、AAA 基準で 7:1 のコントラスト比を推奨しています。

コントラスト比 = (明るい方 + 0.05) / (暗い方 + 0.05)

使い方

  1. 1文字色の HEX を入力します。
  2. 2背景色の HEX を入力します。
  3. 3コントラスト比と AA/AAA の判定を確認します。

参照表

カラーコントラストチェッカー — WCAG AA/AAA 参照表
文字色背景色コントラスト比判定
#111111#FFFFFF18.88:1AAA
#777777#FFFFFF4.48:1通常テキスト AA 不合格

出典・基準

よくある質問

WCAG AA のテキストコントラスト基準はどのくらいですか？

通常テキストは 4.5:1 以上、大きなテキストは 3:1 以上で WCAG AA を満たします。

カラーコントラストの入力値はサーバーに送信されますか？

いいえ。このツールはブラウザ上で処理され、入力値をサーバーに送信しません。

関連ツール