元データから始める
コントラストチェッカー は「WCAG 2.1ガイドラインに対して色のコントラスト比を即座にチェックします。あなたのテキストが読みやすく、デザインがすべての人にとってアクセスしやすいことを確認してください。無料で使いやすいです。」という作業に向いています。重いデスクトップアプリへ移らず、ブラウザ内で進められます。
コントラストチェッカー
WCAG 2.1ガイドラインに対して色のコントラスト比を即座にチェックします。あなたのテキストが読みやすく、デザインがすべての人にとってアクセスしやすいことを確認してください。無料で使いやすいです。
広告
広告
How to Use
- 1色を入力 テキストと背景色のHEXコードを入力します。
- 2プレビューを表示 テキストがリアルタイムでどのように見えるかを確認します。
- 3比率を確認 計算されたコントラスト比を確認します。
- 4コンプライアンスを検証 WCAG AA/AAA基準に合格するかどうかを確認します。
アクセシビリティが重要な理由
より広いオーディエンスにリーチ
色覚異常のある人々（男性の約12人に1人、女性の200人に1人）や低視力の人々があなたのコンテンツを利用できるようにします。
すべての人の体験を向上
良好なコントラストは、特に薄暗い画面や明るい日光の下で、すべての人の読みやすさを向上させます。
WCAGの評価を理解する
レベルAA（標準）
通常のテキストには4.5:1、大きなテキストには3:1が必要です。ほとんどのウェブサイトの標準的な目標です。
レベルAAA（拡張）
通常のテキストには7:1、大きなテキストには4.5:1が必要です。重度の視力喪失を持つユーザーのためにアクセシビリティを強化します。
100%プライベート＆セキュア
このコントラストチェッカーは完全にあなたのブラウザで実行されます。私たちのサーバーにデータが送信されることはありません。
コントラストチェッカー の活用シーン
コントラストチェッカー は、素材を準備し、変更を加え、共有前に結果を確認する小さなワークフローで使うと効果的です。
結果を確認する
出力をプレビューし、元ファイルと比べながら、公開や共有に合う状態まで調整します。
次の作業につなげる
近い作業は カラーツール カテゴリ内で続けられます。
関連ワークフロー
こちらもおすすめ
役立つガイド
FAQ
カラーコントラストとは何で、なぜ重要なのですか？
カラーコントラストは、前景の色とその背景との間の明るさの差です。高いコントラストは、視覚障害のある人々があなたのコンテンツを効果的に知覚できるようにします。
ロゴはこれらの基準を満たす必要がありますか？
いいえ、WCAGガイドラインは、ロゴやブランド名の一部であるテキスト、および純粋に装飾的なテキストには例外を設けています。
低いコントラスト比を修正するにはどうすればよいですか？
輝度の差を大きくします。明るい色をより明るくするか、暗い色をより暗くします。当社のライブプレビューを使用して実験してください。
広告