toolpodsへの開発依頼はこちら
ファイルはブラウザ内のみで処理され、サーバーへのアップロードは一切行われません。お客様のデータが外部に送信されることはなく安心してご利用いただけます。
配色アクセシビリティチェッカー
テキストと背景色のコントラスト比を計算し、アクセシビリティ基準を満たしているか確認します
色の提案
サンプルテキスト
コントラスト比: 21.00:1
WCAG基準 | AA | AAA |
---|---|---|
通常テキスト (最小4.5:1) | ||
大きなテキスト (最小3:1) | ||
UIコンポーネント (最小3:1) |
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)以上の太字フォントを指します。 大きいテキストはより読みやすいため、コントラスト比の要件が緩和されています。
関連ツール
🏆人気ツールランキング
最近よく使われているツールのランキングです