FIRST CH TOOLS LOCAL PROCESSING — サーバー送信なし EN

FIRST CH TOOLS / デザイン / 03 CONTRAST CHECKER

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

文字色と背景色のコントラスト比（WCAG 2.1）を計算し、アクセシビリティ基準 AA / AAA の合否を判定します。結果はURLに反映されるので、そのまま共有できます（例: ?fg=333333&bg=ffffff）。

大きいテキストの見え方（24px太字）
通常テキストの見え方です。本文サイズ（15px）でこの配色がどれだけ読みやすいかを確認できます。
—
コントラスト比
基準必要比率判定
AA — 通常テキスト4.5 : 1—
AA — 大きいテキスト（18pt / 14pt太字以上）3 : 1—
AAA — 通常テキスト7 : 1—
AAA — 大きいテキスト4.5 : 1—
UI部品・図形（非テキスト）3 : 1—

How to Use

  1. 2色を指定するカラーピッカーまたはHEX値（例: #333333）で文字色と背景色を入力。
  2. 判定を確認コントラスト比とAA/AAA基準の合否が即時に表示されます。プレビューで実際の見え方も確認できます。
  3. 共有する結果はURLに反映されるので、そのままコピーしてチームに共有できます。

About This Tool

コントラスト比はWCAG 2.1（Webアクセシビリティの国際基準）の相対輝度計算式に基づいて算出しています。 一般的なWebサイトの本文は「AA — 通常テキスト（4.5:1以上）」を満たすことが推奨されます。 当社ではサイト納品時の検収チェック項目としてコントラスト比の確認を標準化しています。

コントラスト比が足りていても、赤と緑のように色相だけで区別している配色は一定の割合の人に判別できません（日本では男性の約5%）。その2色がP型・D型・T型色覚でどう見えるかは 色覚シミュレーター で確かめられます（この2色をそのまま持ち込めます）。

From AI Agents

このツールのコントラスト比計算・AA/AAA判定ロジックは、MCP（Model Context Protocol）サーバー @first-ch/tools-mcp の contrast_check ツールとしても提供しており、ブラウザを使わずAIエージェントから直接呼び出せます。導入方法の詳細は AIエージェントからの使い方 を参照してください。

導入

claude mcp add firstch-tools -- npx -y @first-ch/tools-mcp

呼び出し例

# 例: エージェントに渡す入力
contrast_check(fg="333333", bg="ffffff")

Other Tools