使い方
- まず文字色と背景色を 1 組入れます。
- コントラスト比と AA / AAA の通過目安を normal text と large text で見ます。
- 色を選び直したいときは カラーピッカー に戻ります。
Wave 41 幅拡張
色の候補を readability 判定へつなぐ
このページは pass / fail の当たりを見るための軽量ページです。色値の確認そのものはカラーピッカー向きです。
どのページと使い分けるか
カラーピッカー はまだ1色しか決まっていない段階、カラーミキサー は2色のあいだの候補色を試す段階、カラー変換 は決めた色を別表記へ渡す段階に向いています。1色を 50/100/200 のような段階付きへ広げたいときは カラースケール生成、ブランド色から背景・文字・アクセント・境界線まで役割つきで組みたいときは アクセシブル配色、背景用の線形・放射グラデーション CSS を組みたいときは グラデーション生成 に進みます。このページは、前景色と背景色の組み合わせが固まったあとに読みやすさを最終確認する段階で使います。
よくある質問
このページでは何を確認できますか？
前景色と背景色の組み合わせから、コントラスト比と WCAG AA / AAA の通過目安を normal text と large text で確認できます。
これだけでアクセシビリティ確認は十分ですか？
十分ではありません。文字サイズ、太さ、行間、状態変化、周辺 UI も合わせて確認してください。
カラーピッカーとはどう使い分けますか？
カラーピッカーは HEX / RGB / HSL の確認向きです。このページは前景色と背景色が決まった後の readability 判定向きです。
共有URLに色以外の情報は入りますか？
入りません。共有URLに入るのは前景色と背景色の HEX だけです。