配色コントラストチェッカー|Color Contrast Checker

複数の画像をアップロードすると、連結して1枚の画像として保存できるWebアプリです。画像処理はブラウザ内のCanvas APIで完結し、外部のサーバー等に保存されないので安心してお使いいただけます。

このツールは 回 使われています。

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

背景色と文字色のコントラスト比をリアルタイムに算出し、WCAGアクセシビリティ基準への適合状況を確認できるデザイン補助ツールです。

背景色
文字色
21.00
: 1
コントラスト比
Level AA
Level AAA
通常テキスト
Pass 4.5:1
Pass 7.0:1
大きなテキスト
Pass 3.0:1
Pass 4.5:1
プレビュー

見出しテキスト / Heading Text

本文テキストのサンプルです。この配色で実際のWebページを制作した際の、文字の読みやすさを確認できます。アクセシビリティを考慮した色選びをサポートします。

小さなテキスト(12px):著作権表記・注意書き等の補足情報。

コントラスト調整

現在のコントラスト比を確認し、不足している場合は下のボタンで文字色を調整できます。

使い方ガイド
  1. 「背景色」と「文字色」をカラーピッカーまたは16進数コードで指定します。
  2. 「コントラスト比」がリアルタイムで算出・表示されます。
  3. WCAG判定表で各アクセシビリティレベル(AA / AAA)の合否を確認します。
  4. 「プレビュー」で実際のUI(見出し・ボタン・リンク等)の見え方をシミュレートします。
  5. コントラストが不十分な場合、「文字色を明るく/暗く」ボタンで色を微調整できます。

WCAG 2.1 基準について

  • Level AA(推奨):通常テキスト 4.5:1 以上 / 大きなテキスト 3.0:1 以上
  • Level AAA(最高基準):通常テキスト 7.0:1 以上 / 大きなテキスト 4.5:1 以上
  • 大きなテキスト:18px 以上、または 14px 以上の太字

ご利用にあたっては、本Webアプリの 利用規約 も合わせてご確認ください。

バグや表示の乱れ、追加してほしい機能などがあれば、こちらよりお知らせください。

バグや表示の乱れ、使いにくかった点、追加してほしい機能などがあればお知らせください。
同意事項
・本フォームは不具合報告専用です。個別の返信は原則行っておりません。
・誹謗中傷、脅迫、公序良俗に反する内容が含まれる場合、IPアドレス等のログに基づきしかるべき対処を行います。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次