複数の画像をアップロードすると、連結して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):著作権表記・注意書き等の補足情報。
コントラスト調整
現在のコントラスト比を確認し、不足している場合は下のボタンで文字色を調整できます。
使い方ガイド
- 「背景色」と「文字色」をカラーピッカーまたは16進数コードで指定します。
- 「コントラスト比」がリアルタイムで算出・表示されます。
- WCAG判定表で各アクセシビリティレベル(AA / AAA)の合否を確認します。
- 「プレビュー」で実際のUI(見出し・ボタン・リンク等)の見え方をシミュレートします。
- コントラストが不十分な場合、「文字色を明るく/暗く」ボタンで色を微調整できます。
WCAG 2.1 基準について
- Level AA(推奨):通常テキスト 4.5:1 以上 / 大きなテキスト 3.0:1 以上
- Level AAA(最高基準):通常テキスト 7.0:1 以上 / 大きなテキスト 4.5:1 以上
- 大きなテキスト:18px 以上、または 14px 以上の太字
