WCAG コントラスト比 チェッカー 前景色と背景色の間のWCAGコントラスト比を確認します。

What Is コントラスト比チェッカー?

WCAGコントラスト比チェッカーは、Web Content Accessibility Guidelines (WCAG) 2.1に基づいて、前景（テキスト）と背景の色の組み合わせのアクセシビリティを評価します。ツールは、輝度ベースのコントラスト比を計算し、それを4つのWCAGしきい値と比較します：通常のテキスト（≥4.5:1）のAA、大きいテキスト（≥3.0:1）のAA、通常のテキスト（≥7.0:1）のAAA、大きいテキスト（≥4.5:1）のAAA。これらのしきい値を満たすことで、低視力や色覚異常を持つユーザーも含むさまざまな視覚障害のあるユーザーがテキストを読みやすくします。ツールは、カラーコンビネーションの実際の見え方をさまざまなサイズで示すライブテキストプレビューと、それぞれのWCAGレベルに対する明確なパス/失敗インジケーターを提供します。これは、アクセシブルで包括的なデジタルエクスペリエンスを作成することに尽力しているすべてのWeb開発者やデザイナーの必須ツールです。

Why Use コントラスト比チェッカー?

• WCAG AAAAA
• WCAG
• 4.5:1/3:1/7:1
• Swap
• AA/AAA

Common Use Cases

Web

WCAG 2.1ADA/AODA

WCAG

WCAG

WCAG

Technical Guide

コントラスト比は、WCAG 2.1の相対輝度式を使用して計算されます。まず、各色チャンネルが線形化される：sRGB ≤ 0.03928の場合、linear = sRGB/12.92；それ以外の場合はlinear = ((sRGB + 0.055)/1.055)^2.4です。相対輝度L = 0.2126×R + 0.7152×G + 0.0722×Bです。コントラスト比 = (L_lighter + 0.05) / (L_darker + 0.05)です。比率は、1:1（コントラストなし、同じ色）から21:1（黒を白で表す）までの範囲になります。WCAG 2.1では、4つのしきい値が定義されています：レベルAAでは、通常のテキスト（<18ptまたは<14ptボールド）の場合≥4.5:1、大きいテキスト（≥18ptまたは≥14ptボールド）の場合は≥3:1です。レベルAAAでは、通常のテキストの場合≥7:1、大きいテキストの場合≥4.5:1です。これらのしきい値は、視覚的明瞭度に関する研究に基づいており、20/40の視力または中程度の低視力を有するユーザーにとって読みやすさを保証します。

Tips & Best Practices

• 1
  4.5:1 WCAG AA
• 2
  18px+/14px+ 3:1 AA
• 3
  7:1 AAA
• 4
  Swap
• 5
  Dark mode 4.5:1/3:1/7:1

Related Tools

HEXからRGBコンバーター

HEXカラーコードを瞬時にRGB値に変換。プレビューパネルでライブ表示。

🎨 Color Tools

カラーピッカー

HEX、RGB、HSL、CMYK形式の出力に対応したインタラクティブなカラーピッカー。

🎨 Color Tools

色のシャデーゲネレーター

任意の色を指定したステップ数で暗くすることができます。

🎨 Color Tools

アクセシブルパレットジェネレーター

WCAGのコントラスト要件を満たすカラーパレットを生成します。

🎨 Color Tools

色覚異常シミュレーター

さまざまなタイプの色覚障害を持つ人々が色をどのように認識するかをシミュレートします。

🎨 Color Tools

Frequently Asked Questions

Q WCAG?

1:1~21:1 WCAG

Q AA AAA?

AA 4.5:1AAA 7:1

Q

18pt/24px14pt/18.67px

Q

WCAG

About This Tool

コントラスト比チェッカー is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.