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

カラーコントラスト比は、前景（テキスト）色と背景色の明るさの違いを測定します。Web Content Accessibility Guidelines（WCAG）2.1 は、可読性のための最小コントラスト要件を設定しています。WCAG AA は通常テキストに 4.5:1、大きなテキスト（18pt 以上または 14pt 以上の太字）に 3:1 を必要とします。WCAG AAA はより厳しい要件があります：通常テキストに 7:1、大きなテキストに 4.5:1。コントラスト比が高いほど、特に視覚障害のあるユーザーにとってテキストを読みやすくなります。

前景色（テキスト色）と背景色を入力または選択します。ツールがコントラスト比を計算し、通常テキストと大きなテキストの両方について WCAG AA と AAA 規格を満たしているかどうかを示します。Swap ボタンを使用して色を素早く交換します。Visual Preview はカラーの組み合わせによるサンプルテキストを表示し、可読性を評価するのに役立ちます。Color Blindness Simulation を有効にして、さまざまなタイプの色覚異常を持つユーザーに色がどのように見えるかを確認します。

約 8% の男性と 0.5% の女性が何らかの形の色覚異常を持っています。Protanopia は赤の知覚に影響します（赤は暗く見えます）。Deuteranopia は緑の知覚に影響します（緑と赤は似て見えます）。Tritanopia は青の知覚に影響します（青は緑に見えます）。Achromatopsia は完全な色覚異常（灰色の色調のみ）です。これらのシミュレーションでデザインをテストすると、すべてのユーザーのアクセシビリティを確保するのに役立ちます。