Color Contrast Checker

Check WCAG AA/AAA contrast ratio between two colors

この計算機について

カラーコントラストチェッカーは、相対輝度の公式 (L1 + 0.05) / (L2 + 0.05) を使って、前景色と背景色の間の WCAG 2.x コントラスト比を計算します。#rgb、#rrggbb、rgb(r,g,b) の入力を受け付け、正確な比率、両方の色の輝度、通常テキスト (4.5:1 / 7:1) と大きなテキスト (3:1 / 4.5:1) のしきい値における AA と AAA の合否を報告します。無効な色はエラーを返します。アクセシブルなウェブデザインに不可欠です。

Color Contrast Checkerツールの使い方

  1. 入力欄に内容を入力するか貼り付けます。
  2. 出力を確認します — 入力するたびに即座に更新されます。
  3. オプションがあれば、用途に合わせて調整します。
  4. ページの URL をコピーして、結果をそのまま共有します。

一般的な例

  • #ffffff 上の #000000 → 21.0000:1 — すべての AA と AAA レベルに合格
  • #ffffff 上の #777777 → 4.4781:1 — AA 通常テキストにわずかに不合格、AA 大きなテキストには合格
  • #ffffff 上の #0066cc → 5.5666:1 — AA 合格、AAA 通常テキストは不合格
  • #333333 上の #ffcc00 → 8.3564:1 — すべてのテキストサイズで AAA に合格

よくある質問

Color Contrast Checkerツールはどのように機能しますか？

入力または貼り付けを行うと、ツールがブラウザ内で直接処理し、結果をすぐに表示します。入力した内容がサーバーにアップロードされることはありません — すべての計算がお使いのデバイス上で行われます。

Color Contrast Checkerツールはどんな時に使いますか？

開発、デバッグ、デザイン、管理のタスクに便利です — 何もインストールせず、サードパーティのサービスにデータを預けることなく、この変換やチェックを素早く済ませたいときにいつでも使えます。

結果の信頼性はどのくらいですか？

このツールは関連する標準や仕様を直接実装しているため、出力は準拠したソフトウェアが生成するものと一致します。空の入力や不正な入力といったエッジケースは、黙って失敗するのではなく明確に報告されます。

特定の結果を他の人と共有できますか？

はい。入力は URL に反映されるため、アドレスバーをコピーしてリンクを共有すれば、相手側でもツールが同じ状態でそのまま開きます。