選択してカラーコントラストを確認
色のコントラスト
4.5:1
WCAG準拠
通常のテキスト
AA
AAA
大きなテキスト
AA
AAA
グラフィックとUI
AA
おっと!コントラストを確認できません。
オンラインコントラストチェッカーは次で動作します
まだ対応していない環境:
ビジュアル例
大きなテキスト
通常または小さいテキスト、ここにXYピクセル以下のテキスト。通常または小さいテキスト、ここにXYピクセル以下のテキスト。
カラーコントラストピッカーとは?
無料のオンラインカラ―コントラストチェッカーを使って、任意の前景色と背景色のコントラスト比を瞬時に評価できます。デザイナー、開発者、コンテンツ制作者向けに設計されており、通常のテキスト、大きなテキスト、およびグラフィック/UI要素について、WCAG AA/AAAの準拠状況をリアルタイムで表示します。色を選択し、入れ替えるだけで、アクセシビリティのしきい値(通常のテキストでは4.5:1、大きなテキストでは3:1など)に対する合格/不合格のフィードバックが即座に得られます。直感的なインターフェースにより、読みやすさと包括的なウェブデザインのためにパレットを調整でき、ダウンロードは不要です。サイトの色の選択を最適化して、使いやすさを向上させ、アクセシビリティ基準を満たし、よりユーザーフレンドリーな体験を提供しましょう。
WCAG準拠
要素 | 内容 | AA 要件 | AAA 要件 |
---|---|---|---|
通常のテキスト |
AA 通常の本文テキスト 以下 18pt (24px) または 以下 14pt (18.66px) 太字 |
4.5:1 | 7:1 |
大きなテキスト |
見出し、大きなラベル 以上 18pt (24px) または 以上 14pt (18.66px) 太字 |
3:1 | 4.5:1 |
グラフィックとUI |
意味のある非テキスト要素 アイコン、フォームの枠線、ボタン |
3:1 |