ProUtils

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

前景色と背景色のWCAGコントラスト比を検査。

Aa

The quick brown fox jumps over the lazy dog

0123456789 !@#$%^&*()

21: 1

Contrast Ratio

WCAG AA

Normal (≥4.5)Large (≥3.0)

WCAG AAA

Normal (≥7.0)Large (≥4.5)

How to Use

  1. 1

    Enter the foreground (text) color and the background color as HEX values or use the color pickers.

  2. 2

    View the calculated contrast ratio and whether it passes WCAG AA and AAA standards.

  3. 3

    Adjust colors until the desired accessibility level is achieved.

Features

WCAG 2.0 Compliant

Calculates contrast ratios using the official WCAG 2.0 relative luminance formula.

AA & AAA Pass/Fail

Shows pass or fail for both WCAG AA (4.5:1) and AAA (7:1) levels for normal and large text.

Color Picker Support

Use the visual color picker or enter HEX values to set foreground and background colors.

Live Preview

See a live text preview rendered with your chosen colors to visualize the actual contrast.

FAQ

WCAGの要件は?

AAは通常テスト4.5:1、大テキスト3:1。AAAは通常7:1、大テキスト4.5:1。

計算方法は?

WCAG 2.0相対輝度計算式で人間の色覚を考慮して計算。

関連ツール

開発者ツール