Stax
Tools

Color Contrast Checker

Check WCAG AA and AAA colour contrast ratios.

Contrast Ratio
21.00:1
LevelContextRequiredResult
WCAG AANormal text (< 18px, < 14px bold)4.5:1Pass ✓
WCAG AALarge text (≥ 18px or ≥ 14px bold)3:1Pass ✓
WCAG AAANormal text7:1Pass ✓
WCAG AAALarge text4.5:1Pass ✓

The quick brown fox jumps over the lazy dog.

Normal text (18px)

The quick brown fox jumps over the lazy dog.

Large text (24px)

The quick brown fox jumps over the lazy dog.

Bold large (18.67px bold)

PRESETS

WCAGコントラスト要件を理解する

アクセシビリティを超えてコントラストが重要な理由

よくあるコントラストの失敗と修正方法

WCAG 2.1のコントラストガイドラインには2つのレベルがあります — AA（最低限）とAAA（強化）— それぞれ通常テキストと大きなテキストで異なる要件があります。

十分なコントラストは視覚障害のあるユーザーだけでなく、明るい日光の下でのモバイル画面や高齢者、疲労した人など、すべての人の可読性を向上させます。低コントラストの「トレンディな」グレーオンホワイトのデザインは、理解度や読書速度のユーザーテストで常に低評価を受けます。

UIデザイナーはデザインレビュー中にボタンテキストと背景色の組み合わせを確認し、開発前にAAの失敗を検出します。フロントエンド開発者はブランドパレットでチェックを実行して、本文テキスト、見出し、インタラクティブ要素に安全な色のペアを見つけます。クライアント向けのアクセシビリティ監査を準備する代理店は、サイトで使用されているすべてのテキスト色をテストしてWCAG準拠レポートを作成します。製品チームはリブランディング時にこのツールを使用し、別のデザインツールを必要とせずに新しいブランドカラーがアクセシビリティ基準を満たしていることを確認します。

  • WCAG AA 通常テキスト: 4.5:1 — 18pt（24px）未満または14ptボールド（18.67pxボールド）未満のテキストに必要
  • WCAG AA 大きなテキスト: 3:1 — 18pt以上（24px以上）または14ptボールド以上に適用
  • WCAG AAA 通常テキスト: 7:1 — 最大のアクセシビリティに推奨
  • WCAG AAA 大きなテキスト: 4.5:1
  • 白背景に薄いグレーテキスト — #ffffffに対して最低#767676を使用（4.54:1）
  • プレースホルダーテキスト — 一時的なものでも4.5:1を満たす必要がある
  • 無効状態 — WCAGによりコントラスト要件の適用外
  • 装飾的なテキスト（ロゴ、純粋に視覚的なもの）— 要件の適用外

よくある質問

What is WCAG colour contrast?
WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colours to ensure readability for users with visual impairments including low vision and colour blindness. A ratio of 1:1 means no contrast; 21:1 is the maximum (black on white).
What contrast ratio do I need to pass WCAG AA?
WCAG AA requires: 4.5:1 for normal text (below 18pt / 24px), and 3:1 for large text (18pt+ / 24px+ or 14pt+ / 18.67px+ if bold). AA is the standard legal requirement for many accessibility regulations including WCAG 2.1 and the EU Web Accessibility Directive.
What is WCAG AAA contrast?
WCAG AAA is the enhanced accessibility level requiring 7:1 for normal text and 4.5:1 for large text. AAA is optional for most websites but recommended for text-heavy content, news sites, and government portals. It is especially important for users with severe visual impairments.
How is the contrast ratio calculated?
Contrast ratio = (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter colour and L2 is the relative luminance of the darker colour. Relative luminance converts each RGB channel using a gamma-correction formula from the WCAG specification.
Does colour contrast affect SEO?
Google uses accessibility as part of its quality signals for Core Web Vitals and page experience ranking. While contrast ratio is not a direct ranking factor, Lighthouse accessibility audits flag contrast failures, and accessible, readable sites generally have lower bounce rates and better engagement metrics.

関連ツール