グローバルツールハブ
現在の言語: Japanese
ガイド一覧へ戻る

ガイド

WCAGコントラスト比の基本(難しい用語なし)

コントラスト比の意味とAA/AAA基準を実務UIで使う方法をわかりやすく解説します。

コントラスト比は数字だけだと分かりにくいものです。このガイドでは実務で使える形に整理します。

What a contrast ratio represents

It compares how different a text color is from its background.

Higher ratios generally mean easier reading.

AA and AAA in simple terms

AA is the common practical baseline for most web interfaces.

AAA is stricter and useful where maximum readability is needed.

Normal text vs large text

Large text can pass at lower ratios than normal body text.

Always classify text size correctly before deciding pass/fail.

How to apply this in a workflow

Check planned color pairs before development.

Retest final UI states after implementation.

When to read this

  • Starting accessibility reviews.
  • Training designers and developers.
  • Creating color QA checklists.

Use ratios as a decision tool

You do not need to memorize every rule. Use a checker and know which threshold applies to your text size.

関連ツール

コントラストチェッカー

文字色と背景色を比較し、コントラスト比とWCAGレベルを確認できます。

Open Contrast Checker

あわせて読みたいガイド

近い作業フローを扱う別の短い記事も確認できます。