コントラストチェッカー

テキストのコントラスト比を計算するためのWCAGカラーコントラストチェッカー。

コントラスト比 21:1

WCAG AA: Pass

WCAG AAA: Pass

標準テキストの例-16px

WCAG AA: Pass

WCAG AAA: Pass

18pt/24 ピクセルの大きなテキストの例

WCAG AA: Pass

テキストと背景の色を評価する必要があります。WCAG 2.1のガイドラインによると、以下のとおりです。大きいテキスト-最小サイズが 18 ピクセルのテキストには 3:1 のコントラスト比が必要です。小さいテキスト-サイズが 18 ピクセル未満のテキストには 4.5:1 のコントラスト比が必要です。

コントラスト比の低い背景のテキストは、しばしば読みづらいです。これは視覚障害者に悪影響を与えるだけでなく、実際にはすべてのユーザーに不便をもたらします。その一例が、晴れた日に外で携帯電話でテキストを読むことです。

アクセシブルウェブサイトとは、視覚や聴覚に障害のある人が制限なく利用できるように設計されたウェブサイトです。たとえば、これにより、すべてのサイト要素の色のコントラストが十分になります。つまり、テキストの色が背景色とは大きく異なります。

特定のグラフィックスおよびインターフェイスコンポーネントには、少なくとも 3:1 のコントラスト比が必要です。ただし、これにはロゴ、装飾画像、一般的なメディアファイルは含まれません。