ナレッジハブ・技術ガイド
カラーコントラスト比計算・WCAG 2.1アクセシビリティ診断
カラーコントラスト比計算・WCAG 2.1アクセシビリティ診断
本ツールは100%クライアントサイド（ブラウザ内）で動作します。コード、トークン、機密データが外部サーバーに送信されることは一切ありません。
コアアーキテクチャ & 計算式
Contrast Ratio = (L1 + 0.05) / (L2 + 0.05)
Where L1 is the relative luminance of the lighter color and L2 is the luminance of the darker color. The resulting ratio ranges from 1:1 (no contrast, white on white) to 21:1 (maximum contrast, black on white).
ベストプラクティスとガイドライン
- Aim for AA Compliance (4.5:1): The Web Content Accessibility Guidelines (WCAG) Level AA requires a minimum ratio of 4.5:1 for standard body text, and 3:1 for large text (usually 18pt or 14pt bold).
- Don't Rely Solely on Color for Meaning: Colorblind users cannot distinguish certain hues (like red error states versus green success states). Always pair color changes with iconography, underlines, or structural changes.
- Account for Dark Mode Reversals: A high contrast palette in Light Mode often fails catastrophically when mathematically inverted for Dark Mode. You must manually check the contrast ratios for both distinct themes.
よくある質問 (FAQ)
What is WCAG Level AAA?
Level AAA is the strictest accessibility standard, requiring a contrast ratio of 7:1 for normal text. It is typically only mandated for highly specialized government or medical software.
Does contrast apply to non text UI elements?
Yes. WCAG 2.1 introduced a 3:1 minimum contrast ratio requirement for 'UI Components and Graphical Objects', meaning your input borders and button backgrounds must also contrast against the page.
Why do my pure gray colors fail contrast?
Pure mid grays (like #808080) sitting on a pure white background usually hover around a 3.9:1 ratio, which strictly fails the 4.5:1 requirement for body text. You must darken them.