ã«ã©ã¼ã³ã³ãã©ã¹ããã§ãã«ã¼
ããã¹ãã¨èæ¯è²ã®éã®WCAGã³ã³ãã©ã¹ãæ¯ããã§ãã¯ãã¾ãã
大ããããã¹ãã®ãã¬ãã¥ã¼
é常ãµã¤ãºã®ããã¹ããã¬ãã¥ã¼ã¯ãã®ããã«è¡¨ç¤ºããã¾ãã
ã«ã©ã¼ã³ã³ãã©ã¹ããã§ãã«ã¼ã«ã¤ãã¦
ããã¹ãã¨èæ¯è²ã®çµã¿åãããWCAG 2.1ã®ã¢ã¯ã»ã·ããªãã£ã³ã³ãã©ã¹ãåºæºãæºããã¦ãããã確èªãã¾ããAAã¯æ¨å¥¨ãããæä½åºæºãAAAã¯ããé«ãå¯èªæ§ãæ±ããå¼·ååºæºã§ãã
このツールについて
前景色（テキスト）と背景色の組み合わせがWCAG 2.1のアクセシビリティコントラスト基準を満たしているかを確認します。コントラスト比を即座に計算し、AAおよびAAA基準への合否を表示します。
使い方
- 前景色（テキスト）の16進数値を選択または入力します。
- 背景色の16進数値を選択または入力します。
- ライブプレビューと各WCAGレベルの合否結果を確認します。
主な用途
- デザインを公開する前に、テキストと背景色の組み合わせがアクセシビリティガイドラインを満たしているか確認する
- ボタン、リンク、本文テキスト向けに読みやすい配色を選ぶ
- 既存のウェブサイトやアプリのアクセシビリティ準拠状況を監査する
使いこなすヒント
- AA（4.5:1）は、ほとんどのウェブサイトが通常テキストで満たすべき最低基準です。
- 大きいテキスト（18pt以上、または太字14pt以上）は低いコントラストでも読みやすいため、必要な比率が低く設定されています。
よくある質問
WCAG AAとAAA準拠の違いは何ですか？
AAはほとんどのウェブサイトが満たすべき最低基準で、通常テキストには4.5:1のコントラスト比が必要です。AAAは7:1が必要な、より厳しい基準で、最大限の読みやすさが重要なコンテンツ向けです。
なぜ大きいテキストの必要なコントラスト比は低いですか？
大きいテキスト（18pt以上の標準、または14pt以上の太字）は本来読みやすく見えるため、WCAGは通常テキストの4.5:1ではなく大きいテキストにはより低い3:1の比率に設定しています。
コントラスト比は実際にどのように計算されますか？
WCAG式に基づいて両色の相対的な輝度を計算し、1:1（同じ色で対比なし）から21:1（黒と白で最大対比）の範囲の比率として表現されます。
色の組み合わせがコントラストチェックに失敗した場合はどうしますか？
テキスト色を暗くする、背景を明るくする、またはテキストサイズを増やして大テキストの低い必要比率の下にまでサイズを大きくすることを試してください。
テストする色はサーバーに送信されますか？
いいえ。コントラスト比は標準WCAG式を使ってブラウザ内で完全に計算されます。色データは送信されたり保存されたりしません。
テキストと背景色のWCAGコントラスト比をチェックします。AA/AAA基準への適合を無料でその場で確認できます。