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

前景色と背景色のWCAGコントラスト比を計算し、通常テキスト・大きいテキストのAA・AAAアクセシビリティ合格可否を教えてくれるツールです。実際の文字プレビューも一緒に表示するので、デザイナーや開発者が読みやすさとWebアクセシビリティを点検するときに便利です。

使い方

1. 前景色（文字）と背景色をカラーピッカーまたはHEX（#RRGGBB）で入力します。
2. 算出されたコントラスト比とAA・AAA合格バッジを確認します。
3. 実際のテキストプレビューで読みやすさを目で確かめます。
4. 合格しない場合は色を少しずつ調整し、4.5:1以上を目指します。

よくある質問

AAとAAAとは何ですか？

WCAGのWebアクセシビリティ等級です。通常テキストはAA 4.5:1・AAA 7:1、大きいテキストはAA 3:1・AAA 4.5:1以上のコントラスト比が求められます。本文には最低でもAAをおすすめします。

「大きいテキスト」の基準は何ですか？

18pt（約24px）以上、または14pt（約18.7px）以上の太字を大きいテキストとみなします。大きいテキストはより低いコントラスト比でも合格できます。

入力した色はサーバーに送信されますか？

いいえ。コントラスト比の計算はすべてブラウザ内で処理され、色の値がサーバーに送信・保存されることはありません。