視覚的階層
いろはにほへと。可読性はアクセシビリティにとって不可欠です。
カラーコントラスト比を即座にチェックし、WCAG 2.1準拠を確認。任意の2色を貼り付けて、通常テキスト、大テキスト、UIコンポーネントがAAまたはAAA基準を満たすかどうかを確認。アクセシビリティ要件を満たさない場合、自動修正提案を表示。
AA(通常テキスト4.5:1、大テキスト3:1)およびAAA(7:1 / 4.5:1)基準に対してテスト。合格/不合格のステータスを一目で確認。
コントラストが不合格の場合、デザイン意図を維持しながらアクセシビリティ基準を満たすカラー調整案を表示。
テキストが背景色で実際にどのように見えるかを確認。通常テキスト、大テキスト、UI要素をリアルタイムでプレビュー。
カラーをHEX、RGB、HSLで入力可能。チェッカーが自動的に変換を行うため、好みの形式で作業できます。
WCAG AAの場合:通常テキストは最低4.5:1、大テキスト(18ptまたは14pt太字)は最低3:1、非テキストUIコンポーネントは最低3:1が必要です。
AAAはより厳格な基準:通常テキスト7:1、大テキスト4.5:1。ほとんどのデザインシステムはAAを最低基準とし、AAAを目標としています。
いいえ。WCAG 2.1では、UIコンポーネント(ボタン、入力枠線、アイコン)や意味を伝えるグラフィックオブジェクトにも3:1のコントラストが要求されます。
約8%の男性と0.5%の女性が何らかの色覚異常を持っています。適切なコントラストは、弱視の方、明るい日差しの下、または低品質の画面を使用している方を含め、すべての人がコンテンツを読みやすくするために重要です。