デザインツール
カラーコントラストチェッカー
WCAGアクセシビリティ準拠のためのカラーコントラスト比をチェック
前景色
背景色
プレビュータイトル
選択した色の組み合わせで読みやすさを確認するためのサンプル本文テキストです。
16px
大きいテキスト（≥18pxまたは≥14px太字）は低いコントラストが必要です。
コントラスト比
14.18:1
通常テキスト (<18px)
AA (4.5:1)AAA (7:1)
大きいテキスト (≥18px / ≥14px bold)
AA (3:1)AAA (4.5:1)
UIコンポーネント
AA (3:1)
WCAGについて
WCAG 2.1 Level AA: 通常テキスト最低4.5:1、大きいテキスト3:1。
WCAG 2.1 Level AAA: 通常テキスト強化7:1、大きいテキスト4.5:1。
カラーコントラストチェッカーとは？
WCAGアクセシビリティ準拠のためのカラーコントラスト比をチェック
カラーコントラストチェッカーは、ブラウザで直接動作する無料のオンラインツールです。インストールやサインアップは不要です。すべての処理はデバイス上でローカルに行われ、データのプライバシーとセキュリティが確保されます。
なぜカラーコントラストチェッカーを使うべきですか？
- ✓100%無料 - 隠れた費用やプレミアム機能はありません
- ✓登録不要 - アカウント作成なしですぐに使えます
- ✓プライバシー重視 - すべての処理はブラウザで行われます。データはサーバーに送信されません
- ✓超高速 - サーバー遅延なしで即座に結果を確認できます
使い方
- 上の入力エリアにテキストを入力または貼り付けてください
- ツールが自動的に入力を処理します
- 結果をコピーするかファイルとしてダウンロードしてください
機能
- ✓WCAG 2.1 AA/AAAレベル
- ✓リアルタイムコントラスト比
- ✓テキストプレビュー
- ✓色調整提案
- ✓大テキスト/通常テキスト基準
- ✓カラーピッカー統合
よくある質問
What is a good contrast ratio?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text.
関連ツール
カラーパレットジェネレーターFree color palette generator. Create beautiful color schemes with harmony rules. Export as CSS, Tailwind, or SCSS. Perfect for web design, UI/UX, and branding.カラー変換Free online color converter. Convert colors between HEX, RGB, HSL, HSV, CMYK formats. Includes color picker, contrast checker, and CSS color codes.色覚シミュレーターSimulate how colors appear to people with color vision deficiency