カラーコントラストチェックは、背景色と文字色の視認性を評価するための重要なプロセスです。
適切なコントラスト比を保つことで、色覚障害を持つユーザーや視力が弱いユーザーにも情報を伝えやすくなります。
アクセシビリティ基準に準拠することはWeb制作の必須要件です。
Web Content Accessibility Guidelines（WCAG）では、テキストと背景のコントラスト比の最低基準が定められています。
通常テキストは最低4.5:1、見出しや大きなテキストでは3:1が推奨されます。
これを満たすことで、多くのユーザーが快適にコンテンツを閲覧可能です。
画像に表示されるテキストやアイコンもコントラストの影響を受けます。
alt属性は視覚的な情報を補完するため、画像の内容が伝わる適切な説明を記述することが重要です。
カラーコントラストと合わせてアクセシビリティ全体の配慮が求められます。
カラーコントラストを改善する際は、デザインの美観を損なわない範囲で調整を行うことが大切です。
背景色やフォントカラーの微調整や、影やアウトラインの追加など工夫して視認性を向上させましょう。
常にユーザー目線でのチェックを忘れずに行うことが成功の秘訣です。
function hexToRgb(hex) { ... }
まず、色を16進数（#ffcc00 など）で入力されたものを、RGB（赤・緑・青の値）に変換します。 これは、次に説明する「明るさ」の計算をするために必要な準備です。
function getLuminance(r, g, b) { ... }
ここでは、RGBの値から「色の明るさ（輝度）」を求めています。 人の目の感じ方を考慮した数式が使われていて、単純な平均ではなく、緑を最も重視した計算になっています（これは人間が緑に最も敏感なため）。
const getContrastRatio = (l1, l2) => (Math.max(l1,l2)+0.05) / (Math.min(l1,l2)+0.05);
背景と文字の明るさの差からコントラスト比を計算しています。 この比率が大きいほど、背景と文字がはっきり分かれていて読みやすい、ということになります。
function getRating(r, type) { ... }
コントラスト比が十分かどうかを、WCAGの基準（国際的なアクセシビリティガイドライン）に従って評価しています。 「通常の文字」「大きな文字」「UI要素」でそれぞれ必要なコントラスト比が違うため、用途ごとに判定しています。
function updateColors() { ... }
この関数が、色が変更されたときにすべてを更新する中枢部分です。 具体的には以下の流れで処理しています：
2つの色をRGBに変換
それぞれの明るさを計算
コントラスト比を算出
比率に基づいて評価
プレビューに色を反映
結果を画面とURLに表示
これによって、選んだ色の組み合わせが読みやすく、安全なデザインかどうかをすぐに確認できます。
url.searchParams.set('bg', bgColorPicker.value); url.searchParams.set('text', textColorPicker.value);
最後に、選んだ色をURLに反映させることで、「結果を共有する」「再度開く」といった行動ができるようになっています。