Color Contrast Checker

使い方

1. 前景色と背景色を入力します。HEX、RGB、HSL のいずれも受け付けます。
2. ページがコントラストの値と、AA / AAA の通常テキストおよび大きなテキストの基準を満たすかどうかをそのまま表示します。
3. 基準に届かない場合は 色のプレビュー で実際の文字の見え方を確かめ、基準を満たすまで色を調整します。

よくある用途

• 公開前の自己点検 —— デザイン稿の本文の色が AA に達しているかを確かめます。
• ダークテーマとライトテーマの変更 —— 背景が暗いときは文字を明るくして読みやすくします。
• 他人のデザインを受け入れる —— 配色を受け取りましたら、見栄えの話を始める前に、まずコントラストを測ります。

よくある質問

Q: AA と AAA はどれくらい違いますか？ A: AA は通常テキストでコントラスト 4.5:1 以上、大きなテキスト（18pt 以上または 14pt の太字）で 3:1 以上を要求します。AAA はそれが 7:1 と 4.5:1 に上がります。ほとんどのプロダクトは AA を満たせば十分です。

Q: コントラストの計算が通れば、必ずアクセシブルですか？ A: いいえ。コントラストはそのうちの 1 項目にすぎず、色だけを唯一の情報伝達手段にはできません。フォントのサイズや太さ、色の有無だけで意味を伝えていないかも、確認する必要があります。

Q: 半透明の文字はどう計算しますか？ A: まず背景と合成した最終的な色を出してから、コントラストを計算します —— 半透明のまま扱うと結果が歪みます。