色コントラストチェッカー

WCAGアクセシビリティ準拠のための色コントラスト比を確認。前景色と背景色のAAおよびAAA準拠レベルをテスト。

大きいテキストプレビュー（18pt+）

これらの色で通常の本文テキストがどのように見えるかを確認できます。

コントラスト比

✓ AAA
通常テキスト
(<18pt / <14pt bold)
✓ AAA
大きいテキスト
(≥18pt / ≥14pt bold)
✓ AA
UIコンポーネント
(icons, borders)
AAA: 優秀AA: 良好Fail: 不十分
WCAG 2.1は通常テキストに4.5:1コントラスト（AA）と強化7:1（AAA）を要求。大きいテキスト（18pt+または14pt太字）はAAに3:1、AAAに4.5:1が必要。UIコンポーネントは最低3:1が必要。

使い方

  1. 1

    前景色を入力

    HEX色コードを入力するか、カラーピッカーを使用してテキストまたはアイコンの色を選択します。

  2. 2

    背景色を入力

    HEXコードまたはカラーピッカーを使用して背景色を設定します。一般的な背景は#FFFFFF（白）と#000000（黒）です。

  3. 3

    WCAG準拠を確認

    コントラスト比を確認し、色が通常テキスト、大きいテキスト、UIコンポーネントのAAおよびAAA基準を満たしているか確認します。

  4. 4

    アクセシビリティのために調整

    色が失敗した場合、AAまたはAAA準拠を達成するまでテキストを暗くするか背景を明るくしてみてください。

よくある質問

どのコントラスト比が必要ですか？
WCAG AA準拠：通常テキスト4.5:1、大きいテキスト（18pt+）3:1。AAA（強化）：通常テキスト7:1、大きいテキスト4.5:1。UIコンポーネントとアイコンは最低3:1が必要。
大きいテキストとは？
大きいテキストは通常の太さで18pt（24px）以上、太字テキストで14pt（18.5px）以上と定義されます。大きいテキストはコントラスト要件が低くなります。
AAとAAAどちらが良いですか？
AAAはより良いアクセシビリティを提供しますが、ブランド色では達成が難しい場合があります。AAはほとんどの状況での最低法的要件です。可能であれば、特に本文テキストでAAAを目指してください。
色覚異常のユーザーにも機能しますか？
コントラスト比は低視力を含むすべてのユーザーに役立ちます。ただし、色覚異常のユーザーには色だけの表示を避ける必要があるかもしれません。色と一緒にパターン、アイコン、テキストラベルを使用してください。