色コントラスト計算機

文字色と背景色のコントラスト比を計算し、WCAG(Webアクセシビリティの基準)のAA・AAAに合格するかを判定します。

文字の色

背景の色

コントラスト比—

AA(通常の文字 4.5以上)—

AA(大きな文字 3以上)—

AAA(通常の文字 7以上)—

AAA(大きな文字 4.5以上)—

アイコン・枠線など(3以上)—

計算式

大きな文字は、WCAGの定義で、18pt(24px)以上、または、14pt(約18.7px)以上の太字です。文字が背景の画像や、グラデーションの上にあるときは、いちばん条件の悪い部分で、確認してください。

色コントラスト計算機では何がわかりますか？

文字色と背景色のコントラスト比を計算し、WCAG(Webアクセシビリティの基準)のAA・AAAに合格するかを判定します。

何を入力すればいいですか？

次の項目を入力します: 文字の色、背景の色。内容を変えると、結果もそれに合わせて変わります。

結果にはどんな項目が表示されますか？

「コントラスト比」「AA(通常の文字 4.5以上)」「AA(大きな文字 3以上)」「AAA(通常の文字 7以上)」「AAA(大きな文字 4.5以上)」「アイコン・枠線など(3以上)」などが表示されます。

どんな計算式を使っていますか？

ページ内の「計算式」にまとめています。たとえば「コントラスト比 = (明るい色の相対輝度 + 0.05) ÷ (暗い色の相対輝度 + 0.05)」のような式です。

入力した値は外部に送信されますか？

いいえ。処理はお使いのブラウザの中だけで行い、サーバーには送信しません。

結果はどのくらい正確ですか？

色の見え方はモニターや印刷で変わります。サイズや比率は計算どおりですが、仕上がりは実際に書き出して確認してください。

結果をコピーできますか？

はい。「結果をコピー」ボタンで、表示されている結果をクリップボードにコピーできます。

スマホでも使えますか？

はい。画面の幅に合わせて表示されます。アプリのインストールや会員登録は必要ありません。

同じカテゴリ(色・配色・グラデーション)の他のツールはありますか？