アクセシビリティにおけるコントラスト比が重要な理由は？

コントラスト比が低いと、色覚障害のある方、高齢者、明るい場所でのスマートフォン利用者がテキストを読みにくくなります。WCAG基準を満たすことで、すべてのユーザーに読みやすいデザインになります。

テキストと背景色のコントラスト比を改善する方法は？

テキスト色を暗く、または背景色を明るくしてコントラストを高めます。本ツールでリアルタイムに確認しながら、WCAG基準を満たす色の組み合わせを見つけられます。

カラー無料登録不要

文字色と背景色のコントラスト比をWCAG 2.1基準（AA/AAA）でチェック。アクセシビリティ準拠の色選びに。無料オンラインツール。

Foreground

Background

The quick brown fox

Normal text — lorem ipsum dolor sit amet, consectetur adipiscing elit.

Small text — the quick brown fox jumps over the lazy dog.

Contrast Ratio8.72:1

1:13:1 (AA Large)4.5:1 (AA)7:1 (AAA)21:1

WCAG Compliance

Normal Text

AAA

AA requires 4.5:1 · AAA requires 7:1

Large Text (18pt+)

AAA

AA requires 3:1 · AAA requires 4.5:1

FAQ

WCAG AA基準は通常テキストで4.5:1以上、大きなテキストで3:1以上のコントラスト比を要求します。AAA基準はより厳しく、通常テキストで7:1以上、大きなテキストで4.5:1以上です。

バリエーション

読み込み中...