WCAGコントラストチェックツール – AA・AAAのテキスト基準に対応
このWCAGコントラストチェックツールは、前景色と背景色のコントラスト比を計算し、通常テキスト・大きなテキストのAAまたはAAA要件に照らしてチェックします。ライブプレビューで背景に対するテキストを表示し、読みやすさの評価に役立ちます。基準値は、AAが4.5:1と3:1、AAAが7:1と4.5:1です。
このWCAGコントラストチェックツールは、前景色と背景色のコントラスト比を計算します。通常テキスト・大きなテキストのWCAG AAおよびAAA基準で結果を評価し、背景に対するテキストが見えるライブプレビューを提供します。読みやすさを評価しながら色のコントラストをチェックし、明確な結果を得るために使いましょう。
色をAAまたはAAA基準のどちらで評価するか、テキストが通常か大きいかを選びます。AAでは、必要なコントラスト比は通常テキストが4.5:1、大きなテキストが3:1です。AAAでは、通常テキストが7:1、大きなテキストが4.5:1が基準値です。チェックツールは、選択した要件に対して比がどうなっているかを報告します。
プレビューでは前景色と背景色の役割が異なります：前景色はテキストの色、背景色はその背後の色です。どちらか一方を単独で判断するのではなく、ペアでコントラストをチェックすることでまとめて評価できます。ライブプレビューは、比率と評価に加えた手早い目視チェックになります。
チェックツールは完全にブラウザ上で動作し、入力はお使いのデバイス上で処理されます。データがサーバーに送信されることはありません。ページの読み込み後はオフラインでも動作し、無料で利用できます。開発者、デザイナー、DevOpsエンジニアは、WCAG基準に照らして色の組み合わせをチェックし、インターフェースの共有やリリース前にコントラストの問題を見つけられます。
手順1: チェックしたい前景色と背景色を入力します。チェックツールが比較する2色です。
手順2: 評価基準を選びます。チェックツールは、通常テキスト・大きなテキストのAAまたはAAA基準でコントラストを評価します。
手順3: コントラスト比と評価を確認します。結果に、選択した色が選んだ基準を満たすかどうかが表示されます。
手順4: ライブプレビューを確認します。背景に対するテキストを見ることで、読みやすさを一目で判断できます。
用途: インターフェースで使う前に、前景色と背景色の組み合わせが必要なWCAGコントラスト基準を満たすかチェックします。
用途: 基準を満たさない色の組み合わせを、レビュアーやユーザーに届く前に見つけて、早めに評価します。
用途: コントラスト比だけでなく、合格・不合格の結果とその理由を確認します。
用途: コントラストをチェックしながら、ライブプレビューで背景に対するテキストの見え方を判断します。
用途: テキスト要件が異なる場合に備え、通常テキストと大きなテキストをAAまたはAAA基準でチェックします。
用途: 提案された色の組み合わせが、プロジェクトで従うべき基準値に照らして妥当か確認します。