Color Contrast Checker
WCAG 2.1準拠のコントラスト比チェッカー。AA/AAAレベルの判定とプレビュー。
コントラスト比
21.00:1
大きいテキスト (24px Bold)
通常テキスト (16px) - これはプレビューです。This is a preview of your color combination.
小さいテキスト (14px) - 読みやすさを確認してください。
反転プレビュー
前景色と背景色を入れ替えた場合の見え方です。
通常テキスト AA
(4.5:1以上)
PASS通常テキスト AAA
(7:1以上)
PASS大きいテキスト AA
(3:1以上)
PASS大きいテキスト AAA
(4.5:1以上)
PASSColor Contrast Checkerの使い方
前景色(テキスト色)と背景色を設定すると、WCAG 2.1基準に基づくコントラスト比を即座に計算します。 AA/AAAレベルの判定結果を通常テキスト・大きいテキスト別に表示。Webアクセシビリティの 確保やデザインレビューに活用できます。
How to Use the Color Contrast Checker
This WCAG 2.1 contrast checker calculates the contrast ratio between foreground and background colors. It checks compliance with both AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 for normal, 4.5:1 for large) levels. Live preview shows how your text will actually look. Essential for ensuring web accessibility compliance and creating readable designs. All calculations run in your browser.
開発をもっと効率的に
PR