カラーコントラストチェッカー
文字色と背景色のコントラスト比を無料で計算し、WCAG基準(AA/AAA)を満たすか判定。ブラウザ内処理でサーバーには送信しません。
通常サイズの文字サンプルです。The quick brown fox.
大きな文字のサンプルです。Large Text.
| 判定基準 | 必要な比率 | 結果 |
|---|
よくある質問
コントラスト比はどのように計算していますか? +
WCAG 2.1で定義された相対輝度(relative luminance)の計算式を使い、明るい色の輝度をL1、暗い色の輝度をL2として (L1 + 0.05) / (L2 + 0.05) の式でコントラスト比を算出しています。ブラウザの開発者ツールやAxe、Lighthouseなど他の検証ツールと同じ計算方法です。
AA・AAAとはどんな基準ですか? +
WCAG(Web Content Accessibility Guidelines)が定める達成基準のレベルです。通常テキストはAAで4.5:1以上、AAAで7:1以上、18pt以上(または14pt太字以上)の大きな文字はAAで3:1以上、AAAで4.5:1以上が目安とされています。
ボタンやアイコンなどUI部品にも基準はありますか? +
はい。WCAG 2.1の達成基準1.4.11(Non-text Contrast)では、ボタンの枠線やアイコンなど文字以外の重要なUI部品・グラフィックオブジェクトについても、背景との間で3:1以上のコントラスト比を推奨しています。
判定は自動的にアクセシビリティ準拠を保証しますか? +
いいえ。このツールはコントラスト比の数値判定のみを行う参考ツールです。実際のアクセシビリティ適合には、フォントサイズ・太さ・周囲のデザインなど他の要素も関わるため、最終的な判断は実際の表示やその他のガイドラインもあわせてご確認ください。
入力した色はサーバーに送信されますか? +
いいえ。コントラスト比の計算とプレビュー表示はすべてブラウザ内(JavaScript)で完結し、入力した色が外部に送信されることはありません。
特徴
WCAG 2.1準拠の判定
通常テキスト・大きな文字・UI部品それぞれのAA/AAA基準に対して合否を一目で確認できます。
カラーピッカーとHEX入力の両対応
感覚的に選べるカラーピッカーと、デザインカンプの値をそのまま貼り付けられるHEX入力欄の両方に対応しています。
実際の見え方をその場でプレビュー
通常テキスト・大きな文字・ボタンのサンプルで、実際の配色イメージを確認できます。
ワンクリックで色を入れ替え
文字色と背景色を入れ替えて、逆パターンのコントラストもすぐに確認できます。
使い方
文字色を選ぶ
カラーピッカーまたはHEX入力で文字色を指定します。
背景色を選ぶ
カラーピッカーまたはHEX入力で背景色を指定します。
判定結果を確認
コントラスト比とAA/AAAの判定結果、プレビューを確認します。
ユースケース
Webサイトのアクセシビリティ確認
配色を決める前に、テキストと背景のコントラストが基準を満たしているか確認したいときに。
デザインレビュー・QAチェック
デザインカンプの配色をエンジニア・QA担当が数値で客観的にチェックしたいときに。
ボタン・バナーの視認性チェック
CTAボタンやバナーの文字が背景に埋もれていないか、視認性を確認したいときに。
ダークモード配色の検証
ダークモード用の配色でも、ライトモードと同様にコントラスト基準を満たしているか確認したいときに。
安全性とプライバシー
処理はすべてブラウザ内で完結
入力した色情報はサーバーに送信されず、その場で計算されます。
未公開デザインにも安心
外部に送信しないため、公開前のブランドカラーやデザイン案の確認にも利用しやすい設計です。
入力履歴は残りません
ページを閉じたり再読み込みすると、入力内容は残らず消えます。
アカウント登録不要
会員登録やログインなしで、誰でもすぐに利用できます。
同じカテゴリのツール
他のツールもチェックJSON整形・バリデーター
JSONを整形(プリティ)・圧縮(ミニファイ)・構文チェック。エラー箇所も表示。ブラウザ内処理でサーバー送信なし。
Base64 / URLエンコード変換
Base64エンコード・デコード、URLエンコード・デコードの相互変換。日本語(UTF-8)対応・ブラウザ内処理。
UNIXタイムスタンプ変換
UNIX時刻⇄日時を相互変換。秒/ミリ秒の自動判定、ローカル/UTC表示、現在時刻のリアルタイム表示に対応。
ハッシュ値計算ツール
テキスト・ファイルからMD5/SHA-1/SHA-256/SHA-384/SHA-512を無料計算。チェックサム照合にも対応。ブラウザ内処理でサーバー送信なし。
JWTデコーダー
JWT(JSON Web Token)を貼り付けるだけでヘッダー・ペイロードを無料デコード。有効期限の判定つき。ブラウザ内処理でサーバー送信なし。
正規表現テスター
正規表現をリアルタイムでテスト。マッチ箇所のハイライト・グループ表示・置換結果まで無料で確認できます。
カラーコード変換ツール
HEX・RGB・HSL・HSB・CMYKを無料で相互変換。カラーピッカー・ランダム生成・配色パレット表示にも対応。ブラウザ内処理でサーバー送信なし。
UUID生成・検証ツール
UUID v4をワンクリックで複数生成。書式変更・コピー・ダウンロードに対応。既存UUIDのバージョン・フォーマット検証も無料でできます。
テキスト差分比較ツール
2つのテキストの追加・削除された行を無料でハイライト表示。空白・大文字小文字を無視するオプション、一致率表示にも対応。ブラウザ内処理でサーバー送信なし。
Cron式デコーダー
Cron式を日本語の説明文と次回実行時刻に無料変換。日・曜日のOR条件にも対応し、フィールドごとの意味を内訳表示。ブラウザ内処理でサーバー送信なし。
Markdownプレビュー・HTML変換ツール
Markdownをリアルタイムでプレビュー表示し、HTMLに無料変換。見出し・リスト・表・コードブロックに対応。ブラウザ内処理でサーバー送信なし。
進数変換ツール(2進数・8進数・10進数・16進数)
10進数・2進数・8進数・16進数をリアルタイムで相互変換。任意の2〜36進数変換、AND/OR/XOR/NOT/ビットシフトなどのビット演算にも対応。ブラウザ内処理でサーバー送信なし。
CSV⇔JSON変換ツール
CSV(TSV・セミコロン区切りも対応)とJSONを無料で相互変換。RFC4180準拠のクォート処理、見出し行の有無、区切り文字の自動判定に対応。ブラウザ内処理でサーバー送信なし。
命名規則変換ツール(camelCase・snake_case)
文字列をcamelCase・PascalCase・snake_case・kebab-case・CONSTANT_CASEなど11種類の命名規則に無料で一括変換。略語混じりの識別子にも対応。ブラウザ内処理でサーバー送信なし。
サブネット計算ツール(CIDR / IPv4)
IPアドレスとCIDR/サブネットマスクからネットワークアドレス・ブロードキャストアドレス・使用可能ホスト数・アドレス範囲を無料計算。サブネット分割にも対応。ブラウザ内処理でサーバー送信なし。
chmod計算ツール(パーミッション変換)
Linuxのパーミッションをチェックで選ぶだけで数値(755/644)⇔記号(rwxr-xr-x)を相互変換。setuid・setgid・スティッキービット対応、ls -l 表示の逆算、chmodコマンド生成も可能。
URLパラメータ解析・生成ツール
URLをプロトコル・ホスト・パス・クエリパラメータ・フラグメントに無料で分解。パラメータの追加・編集・削除でURLを即座に再生成し、JSONとしてもコピーできます。ブラウザ内処理でサーバー送信なし。
YAML⇔JSON変換ツール
YAMLとJSONを無料で相互変換。Kubernetes・Docker Compose・GitHub Actionsの設定ファイルもそのまま変換でき、構文エラー箇所も表示。インデント幅の変更にも対応。ブラウザ内処理でサーバー送信なし。
Markdownテーブル生成ツール
CSV/TSVの貼り付けやセル編集からMarkdownの表を無料生成。列ごとの左揃え・中央揃え・右揃え、桁揃え整形、プレビュー表示に対応。ブラウザ内処理でサーバー送信なし。
HTML Markdown 変換
HTMLをMarkdownに無料変換。表(GFMテーブル)・入れ子リスト・チェックボックス・コードブロック(言語名つき)・引用・リンク・画像に対応。WebページやGoogleドキュメントからコピーしたリッチテキストを貼り付けるだけで変換でき、.md保存も可能。
px rem 変換ツール
CSSのpxとremを基準フォントサイズを指定して相互変換。px・rem・em・pt・%・vwを双方向に換算し、CSSを貼り付けてpx指定をまとめてremに一括変換。1pxボーダー除外・早見表つき。
CSS clamp() ジェネレーター
最小・最大のフォントサイズと画面幅からレスポンシブなclamp()を自動生成。rem+vwの推奨値を計算し、画面幅スライダーのプレビュー、ブレークポイント一覧、タイプスケールのCSS変数一括出力に対応。
SQL整形ツール(SQLフォーマッター)
SQL文を無料でインデント付きに整形、または1行に圧縮。SELECT・JOIN・WHERE・INSERT・UPDATE・DELETEなど主要な構文に対応し、キーワードの大文字化オプションも選べます。ブラウザ内処理でサーバー送信なし。
文字列エスケープ/アンエスケープツール
HTMLエンティティ・JS/JSON文字列・CSVフィールドのエスケープ/アンエスケープを無料で相互変換。日本語・絵文字にも対応。ブラウザ内処理でサーバー送信なし。
JSON差分比較ツール
2つのJSONを貼り付けるだけで、キーの追加・削除・値の変更を階層構造ごと自動検出。APIレスポンスや設定ファイルの比較に。パスごとの差分一覧・一致判定・結果コピーに対応。
JSON→TypeScript型定義変換ツール
JSONを貼り付けるだけでTypeScriptのinterface/type定義を無料で自動生成。ネストしたオブジェクト・配列にも対応。ブラウザ内処理でサーバー送信なし。
ユーザーエージェント解析ツール
UA文字列を貼り付けるだけでブラウザ・OS・レンダリングエンジン・デバイス種別を無料で自動解析。自分のUAもワンクリック取得。ブラウザ内処理でサーバー送信なし。
画像⇄Base64変換ツール
画像をドラッグ&ドロップでBase64・Data URIに無料変換。Base64文字列から画像への復元にも対応。imgタグ・CSS背景コードもコピー可能。
ダミーデータ生成ツール
氏名・メール・電話番号・住所・会社名などの架空のテストデータをまとめて無料生成。出力項目を選んでJSON・CSVでコピー・ダウンロードできます。