コントラスト比チェッカー（WCAG）
文字色と背景色を選ぶと、コントラスト比と達成基準をすぐに判定します。
入力した文章やファイルはサーバーに送らず、このブラウザー内だけで処理します。
コントラスト比
- 通常テキスト AA (4.5:1)-
- 通常テキスト AAA (7:1)-
- 大きなテキスト AA (3:1)-
- 大きなテキスト AAA (4.5:1)-
- UI部品・図形 AA (3:1)-
大きなテキストは24px以上、太字なら約18.7px以上です。
プレビュー
大きな見出しはこう見えます
本文の文字は4.5:1以上あると読みやすくなります。小さな画面や屋外の明るい場所でも確かめてみましょう。
小さな注記・13px
入力欄
基準を満たす色の提案
文字色を変更 -
背景色を変更 -
使い方
- 文字色と背景色をカラーボックスで選ぶか、#fff や rgb(…) のようなコードで入力します。半透明の色は背景に重ねた色で計算します。
- コントラスト比と一緒に、通常テキスト（4.5:1）・大きなテキスト（3:1）・UI部品（3:1）のAAと、より厳しいAAAの判定が表示されます。
- 未達の場合は「基準を満たす色の提案」に、色相はそのままで明るさだけを変えたいちばん近い色が出ます。「適用」を押すとすぐに切り替わります。
- URLに2色が入っているので、そのままコピーしてチームと共有できます。
よくある質問
AAとAAAの違いは何ですか？
WCAG（Webコンテンツ・アクセシビリティ・ガイドライン）の達成レベルです。通常テキストはAAで4.5:1以上、AAAで7:1以上が必要です。WCAG 2.0と一致する日本のJIS X 8341-3も同じ基準です。
コントラスト比はどう計算しますか？
2色の相対輝度を求め、（明るい方＋0.05）÷（暗い方＋0.05）で計算します。同じ色なら1:1、黒と白なら21:1です。わずかに届かない値が達成に見えないよう、小数第3位以下は切り捨てて表示します。
UI部品の基準はどんなときに使いますか？
ボタンの枠線、入力欄の境界線、アイコンなど文字以外の要素は、隣り合う色と3:1以上あれば基準を満たします（WCAG 1.4.11）。