toolpodsへの開発依頼はこちら
ファイルはブラウザ内のみで処理され、サーバーへのアップロードは一切行われません。お客様のデータが外部に送信されることはなく安心してご利用いただけます。
配色アクセシビリティチェッカー
テキストと背景色のコントラスト比を計算し、アクセシビリティ基準を満たしているか確認します
色の提案
サンプルテキスト
通常サイズのテキスト表示例
小さなテキストの読みやすさも確認できます
WCAGアクセシビリティについて
コントラスト比とは？
コントラスト比は、テキストと背景の明るさの違いを数値で表したものです。 高いコントラスト比は、ユーザーが内容を読みやすくなり、特に視力が弱い方やカラーコントラストの知覚が限られている方に重要です。
WCAG基準について
Web Content Accessibility Guidelines (WCAG)は、ウェブコンテンツをよりアクセシブルにするための国際標準です。
- AAレベル（最小基準）: 通常テキストは4.5:1以上、大きなテキストは3:1以上のコントラスト比が必要
- AAAレベル（拡張基準）: 通常テキストは7:1以上、大きなテキストは4.5:1以上のコントラスト比が必要
- UIコンポーネント: フォーム要素やアイコンなどのインタラクティブ要素には3:1以上のコントラスト比が必要
大きなテキストの定義
大きなテキストとは、18pt（約24px）以上のフォント、または14pt（約18.7px）以上の太字フォントを指します。 大きいテキストはより読みやすいため、コントラスト比の要件が緩和されています。
配色アクセシビリティチェッカーの使い方
テキスト色と背景色を入力するだけで、WCAG（Web Content Accessibility Guidelines）に基づくコントラスト比を計算し、アクセシビリティ基準への準拠を確認できます。
色を入力
テキスト色と背景色をカラーピッカーまたはHEXコードで入力。リアルタイムでコントラスト比を計算します。
基準を確認
WCAG AA（4.5:1）とAAA（7:1）の両基準で合否を判定。大文字テキストの基準にも対応。
プレビュー
選択した色の組み合わせでテキストがどう見えるか、リアルタイムでプレビュー表示。
WCAGコントラスト比の基準
- AA
WCAG AA（最低基準）
通常テキスト: 4.5:1以上、大きなテキスト（18px太字または24px以上）: 3:1以上。多くのWebサイトで求められる基準です。
- AAA
WCAG AAA（強化基準）
通常テキスト: 7:1以上、大きなテキスト: 4.5:1以上。より高いアクセシビリティを実現する推奨基準です。
関連ツール
🏆人気ツールランキング
最近よく使われているツールのランキングです