colorize
ColorKit
CK

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

文字色と背景色の組み合わせをテストし、Webアクセシビリティ基準（WCAG）を満たしているかを検証します。

Contrast Ratio

6.29 : 1

WCAG AA (Normal)PASS
WCAG AA (Large)PASS
WCAG AAA (Normal)FAIL
UI ComponentsPASS

Auto-Adjust to Pass:

Live Preview Headline

This is a subheadline that demonstrates slightly smaller text. It needs at least a 4.5:1 ratio to be considered legible under WCAG AA guidelines.

This is a standard body paragraph. Good contrast ensures that all users, including those with visual impairments, can read your content without eye strain.

UI components and borders require a 3.0:1 ratio.

コントラストチェッカーの役割

テキストと背景の間の数学的コントラスト比をブラウザ内で瞬時に計算し、Web Content Accessibility Guidelines (WCAG 2.2) に準拠した読みやすいデザインを保証します。

対象ユーザー

UI/UXデザイナー、フロントエンドエンジニア、アクセシビリティ監査担当者など、誰もが使いやすいインクルーシブなWeb体験を構築するすべてのプロフェッショナルのためのツールです。

WCAG AA / AAA 基準の目安

  • WCAG AA（通常テキスト）： 最低 4.5:1 の比率が必要です。
  • WCAG AA（大サイズテキスト）： 18pt以上または14pt太字の場合、最低 3.0:1 が必要です。
  • WCAG AAA（最高適合水準）： 通常テキストで 7.0:1 が求められます。
ナレッジベース & FAQ

よくある質問 (FAQ)

よくある疑問、技術的課題、業界標準に対する分かりやすい解説と解決策。

WCAGおよびウェブアクセシビリティにおける法的最小コントラスト比はいくつですか？expand_more
WCAG 2.1 / 2.2 レベルAA基準では：
  • 通常テキスト（18pt未満または14pt太字未満）： 背景色に対して最低4.5:1のコントラスト比が必要です。
  • 大サイズテキスト（18pt以上または14pt太字以上）： 最低3.0:1の比率が必要です。
  • UIコンポーネントおよびグラフィック要素： 入力フォームの境界線、フォーカス枠、単体アイコンなどは最低3.0:1が求められます。
WCAG AAとWCAG AAAの適合基準の違いは何ですか？expand_more
WCAG AAは商業サイト、銀行、行政機関、SaaSなどで世界的に法的に義務付けられている基準です（本文4.5:1）。一方、WCAG AAAは医療機関や高齢者向けサービスなどの重要ポータルに推奨される最高水準基準であり、通常テキストで7.0:1、見出しテキストで4.5:1が求められます。
入力欄のプレースホルダーがアクセシビリティ監査で不合格になりやすいのはなぜですか？expand_more
ブラウザのデフォルトプレースホルダー文字色（白背景上の#9CA3AFなど）は2.0:1〜2.5:1程度しかなく、レベルAA基準に達しません。ベストプラクティスとしては、プレースホルダーのみに頼らず必ず視認可能な<label>要素を設置し、CSSで適切なコントラスト色を指定することが推奨されます。
W3Cの計算式は相対輝度をどのように算出していますか？expand_more
相対輝度（L）は0.0（最も暗い黒）から1.0（最も明るい白）に正規化された知覚上の明るさです。人間の目は緑の光に最も敏感であるため、sRGBガンマをリニア変換した上で次の比率で合成されます： 
L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin
最終コントラスト比は(L1 + 0.05) / (L2 + 0.05)で算出されます。
黄色のボタン（#FFFF00）やシアンに白文字を使用しても問題ありませんか？expand_more
いいえ。純粋な黄色やシアンは元々の輝度が非常に高いため、白文字と組み合わせるとコントラスト比が1.07:1〜1.25:1程度となり、弱視の方や屋外の直射日光下では完全に視認不能になります。ダークカラー（#0F172A）のテキストと組み合わせると16.8:1の高コントラスト比となり、AA・AAA双方に合格します。