MUTools

その他

コントラストチェッカー

コントラストチェッカーは、前景色（文字色）と背景色を指定して、そのコントラスト比をリアルタイムに計算し、WCAG（Web Content Accessibility Guidelines）2.1 / 2.2 のアクセシビリティ基準を満たしているかを判定するツールです。コントラスト比 チェックの結果は 4.5:1 のように大きく表示され、配色チェッカーとして配色のアクセシビリティをひと目で確認できます。

前景色（文字色）
背景色
コントラスト比17.40:1

プレビュー

通常サイズのテキストの見え方を確認できます。

大きいテキストの見え方

UIコンポーネント例

WCAG 2.1 / 2.2 判定

区分AA?AAA?
通常テキスト合格4.5:1合格7:1
大きいテキスト（18pt / 14pt 太字以上）合格3:1合格4.5:1
UIコンポーネント・グラフィック合格3:1規定なし
APCA?Lc 104.3参考値

色覚特性シミュレーション?

P型（1型・赤）
サンプル
17.40:1
D型（2型・緑）
サンプル
17.40:1
T型（3型・青）
サンプル
17.40:1

見え方は Brettel 1997 法に基づく近似であり、個々人の実際の見え方を保証するものではありません。

計算はすべてお使いのブラウザ内で行われ、入力した色が外部サーバーに送信されることはありません。

関連ツール

QRコード生成

URL / アドレス帳 / Wi-Fi / メール / イベント / 地理座標 / SMS / 電話 / テキストを QR コード画像に変換します。サイズ・形式・色・ロゴを選択可。ブラウザだけで完結します。

くじ引き・抽選

テキスト一覧または数値範囲からランダムに 1〜N 件を抽選します。重複なし・リール演出・抽選履歴の保存に対応。ブラウザだけで完結します。

カラーピッカー

画像から色を抽出してカラーコードを取得します。ルーペで拡大しながらピクセル単位で取得でき、HEX / RGB / HSL 切替・パレットのエクスポートに対応。ブラウザだけで完結します。

カラーコード変換

HEX・RGB・HSL・HSV・OKLCH のカラーコードを相互変換できる無料ツール。透明度付きの RGBA・8桁 HEX・HSLA にも対応し、入力した色を全フォーマットへ一括変換してワンクリックでコピーできます。CMYK の参考値も表示。ブラウザだけで完結します。

ポモドーロタイマー

25 分の集中と 5 分の休憩を繰り返す、無料で使えるオンラインのポモドーロタイマー。勉強・仕事の集中タイマーとして、円形プログレス・アラーム音・全画面・常時最前面のポップアウト表示に対応。ブラウザだけで完結します。

単位変換

長さ・重さ・温度・面積・体積・速度など、さまざまな単位を相互に換算できる無料の単位変換ツール。cm とインチ、摂氏と華氏、坪と平方メートルなどをリアルタイムに変換できます。ブラウザだけで完結します。

コントラストチェッカーツールとは？

コントラストチェッカーは、前景色（文字色）と背景色を指定して、そのコントラスト比をリアルタイムに計算し、WCAG（Web Content Accessibility Guidelines）2.1 / 2.2 のアクセシビリティ基準を満たしているかを判定するツールです。コントラスト比 チェックの結果は 4.5:1 のように大きく表示され、配色チェッカーとして配色のアクセシビリティをひと目で確認できます。

色は HEX コードのテキスト入力に加え、カラーピッカーや、対応ブラウザではスポイト（EyeDropper API）で画面上の色を直接取得して指定できます。判定は「通常テキスト」「大きいテキスト（18pt / 14pt 太字以上）」「UIコンポーネント・グラフィック」の 3 区分について、AA・AAA それぞれの合否を表示します。通常テキストの AA は 4.5、AAA は 7、大きいテキストの AA は 3、UIコンポーネントは 3 が基準（aa コントラスト比 / wcag コントラスト比）です。

さらに、基準に届かない場合は明度を調整して基準を満たす最も近い色を自動提案し、ワンクリックで適用できます。色覚特性シミュレーションでは P型・D型・T型での見え方を並べて確認でき、APCA（WCAG 3.0 で採用が見込まれる知覚ベースの指標）の Lc 値も参考として併記します。指定した配色での実際の見え方プレビューも備えています。

計算はすべてお使いのブラウザ内で行われ、入力した色が外部サーバーに送信されることはありません。アカウント登録不要で、すぐに使えます。

使い方

  1. 前景色（文字色）と背景色を、HEX 入力・カラーピッカー・スポイトのいずれかで指定します。
  2. コントラスト比が自動で計算され、大きく表示されます。
  3. WCAG の 3 区分（通常テキスト・大きいテキスト・UIコンポーネント）について、AA・AAA の合否を確認します。
  4. 基準に届かない場合は、提案された合格色をクリックして前景色・背景色に適用できます。
  5. プレビューで実際の見え方を確認し、色覚特性シミュレーションで P型・D型・T型での見え方も比較します。
  6. 必要に応じて入れ替えボタンで前景色と背景色を反転できます。

利用シーン

  • Web サイトやアプリの文字色・背景色が WCAG のアクセシビリティ基準を満たすか確認したい制作者。
  • デザインカンプの配色がコントラスト比 4.5 以上か、公開前にチェックしたいデザイナー。
  • ボタンやアイコンなどの UIコンポーネントが 3:1 を満たすか確認したいフロントエンドエンジニア。
  • 色覚特性のある利用者にも判別しやすい配色か、シミュレーションで確かめたいユーザー。
  • 不合格の配色を、近い色みのまま基準を満たす色へ手早く調整したいユーザー。
  • APCA など新しい指標も参考にしながら配色のアクセシビリティを検討したいユーザー。

注意点

  • コントラスト比は WCAG 2.x の定義（相対輝度から (L1+0.05)/(L2+0.05) で算出）に基づきます。判定基準は通常テキスト AA 4.5 / AAA 7、大きいテキスト AA 3 / AAA 4.5、UIコンポーネント・グラフィック 3 です。
  • 「大きいテキスト」は 18pt（約 24px）以上、または 14pt（約 18.66px）以上の太字を指します。
  • UIコンポーネント・グラフィックは WCAG 1.4.11 で 3:1 のみが規定され、AAA 基準はありません（表では「規定なし」と表示します）。
  • APCA（Advanced Perceptual Contrast Algorithm）は WCAG 3.0 ドラフトで参照される指標で、本ツールでは参考値（Lc）として併記します。正式な合否判定は WCAG 2.x の比率で行ってください。
  • 色覚特性シミュレーションは Brettel 1997 法に基づく近似で、重症度は最大（2色覚）で計算しています。実際の見え方は個人差があり、これを保証するものではありません。
  • 計算はすべてブラウザ内で完結し、入力した色は外部に送信されません。

よくある質問

コントラスト比 4.5 とは何ですか？
WCAG 2.x で通常サイズのテキストに求められる AA 基準が「コントラスト比 4.5:1 以上」です。前景色（文字色）と背景色の相対輝度の比で計算され、数値が大きいほど見やすくなります。本ツールでは比を自動計算し、4.5 を満たすかをひと目で判定できます。
AA と AAA の違いは何ですか？
AA はアクセシビリティの一般的な達成レベル、AAA はより厳しい最高レベルです。通常テキストでは AA が 4.5:1、AAA が 7:1。大きいテキストでは AA が 3:1、AAA が 4.5:1 が基準です。多くのサイトはまず AA の達成を目標にします。
「大きいテキスト」の基準は？
18pt（約 24px）以上、または 14pt（約 18.66px）以上の太字が「大きいテキスト」に該当し、通常テキストより緩い基準（AA 3:1 / AAA 4.5:1）が適用されます。
基準を満たさないときはどうすればよいですか？
本ツールは、通常テキスト AA（4.5:1）に届かない場合に、色みをできるだけ保ったまま明度を調整して基準を満たす最も近い色を前景色・背景色それぞれで提案します。提案をクリックするとその色が適用されます。
APCA とは何ですか？
APCA（Advanced Perceptual Contrast Algorithm）は、人の知覚により近いコントラストを評価する新しいアルゴリズムで、WCAG 3.0 での採用が見込まれています。本ツールでは Lc 値を参考として表示しますが、現行の正式な判定は WCAG 2.x の比率で行ってください。
色覚特性シミュレーションの精度はどの程度ですか？
P型・D型・T型の見え方を Brettel 1997 法で近似的に再現しています。配色の傾向を把握する目安としては有用ですが、見え方には個人差があり、実際の見え方を保証するものではありません。