機能ガイド
アクセシビリティ コントラストチェッカー
パレットをプロダクトに使う前に、パレットラボが、どの組み合わせがテキストのWCAGコントラストを満たすか、色覚に特性があるとどの色が見分けにくいか、実際のUIでどう見えるかを示します。
Pro ColorSnapr Proに含まれます 更新日:
主なポイント
- コントラスト行列：すべての背景×テキストの組み合わせについて、比率とAA / AA大きい文字 / AAAの判定。
- 色覚での見分けにくさ：1型・2型・3型色覚で区別しにくくなる組み合わせ。
- UIプレビュー：ボタン、カード、テキストにパレットを適用。
- Oklabで補間した滑らかなグラデーション。
- 保存したすべての色で、白文字・黒文字とのコントラストも無料で表示。
使い方
- 1 パレットを開き、パレットラボを選びます。
- 2 アクセシビリティタブを確認します。枠付きのセルは通常テキストでAAを満たしています。
- 3 プレビューやグラデーションに切り替えて色を調整し、もう一度確認します。
よくある質問
どのWCAG基準を使っていますか？
WCAG 2に従い、通常テキストは4.5:1（AA）、大きい文字は3:1（AA大きい文字）、AAAは7:1です。
パレットラボは無料ですか？
パレットラボはColorSnapr Proの機能です。保存した各色の白文字・黒文字とのコントラストは無料です。
スマホで試してみてください — ColorSnaprは無料でダウンロードできます。