toolpodsへの開発依頼はこちら

配色アクセシビリティチェッカー
テキストと背景色のコントラスト比を計算し、アクセシビリティ基準を満たしているか確認します

色の提案

サンプルテキスト
コントラスト比: 21.00:1
WCAG基準AAAAA
通常テキスト (最小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)以上の太字フォントを指します。 大きいテキストはより読みやすいため、コントラスト比の要件が緩和されています。

関連ツール

🏆人気ツールランキング

最近よく使われているツールのランキングです

全てのランキングを見る →