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

Webサイトやアプリのデザインにおいて、テキストと背景のコントラスト比はアクセシビリティの最も基本的な要素です。WCAG 2.1（Web Content Accessibility Guidelines）は国際的なアクセシビリティ標準であり、レベルAAとレベルAAAの2段階の適合基準を定めています。通常テキスト（14pt未満）ではAAレベルで4.5:1以上、AAAレベルで7:1以上が必須です。一方、大テキスト（18pt以上）ではAAレベルで3:1以上、AAAレベルで4.5:1以上が求められます。UI成分やグラフィックス要素の場合は最低3:1の基準が適用されます。

このツールは、2つの色を入力するだけでコントラスト比を自動計算し、AA/AAAの各レベルで通常テキスト・大テキスト・UI成分がそれぞれ適合しているかどうかを一目で判定します。HEX（#FF0000）、RGB（rgb(255,0,0)）、HSL（hsl(0,100%,50%)）の3つの色コード形式に対応しており、デザインツールやFigma、CSSファイルなど多様な環境からの色指定に柔軟に対応できます。ブラウザ内蔵のカラーピッカーも使えるため、直感的に色を選択できます。

コントラスト比が基準に満たない場合は、より濃い前景色やより明るい背景色といった改善案を自動生成します。色の入れ替えボタンで前景と背景を素早く切り替えられるほか、リアルタイムプレビューで実際の見え方を確認しながら調整できます。すべての処理はブラウザ内で完結するため、デザインデータや配色情報を外部に送信する心配もありません。