コントラスト比チェックツール
前景色と背景色のコントラスト比を計算し、WCAGアクセシビリティ基準の合否を確認します。
大きな見出しテキスト (24px Bold)
通常のテキスト。このコントラスト比が読みやすさの基準になります。
小さいテキスト (12px) — このサイズだとより高いコントラストが必要です。
コントラスト比
5.17:1
評価
良好 (AA)
項目AA（最低基準）AAA（推奨）
通常テキスト
合格
不合格
大きいテキスト （18px以上 / 14px Bold）
合格
合格
UIコンポーネント
合格
基準なし
AA（通常テキスト）: 4.5:1 以上 / AAA: 7:1 以上
AA（大きいテキスト）: 3:1 以上 / AAA: 4.5:1 以上
UIコンポーネント（ボタン枠線等）: 3:1 以上
コントラスト比チェックツールの使い方
カラーピッカーまたはHEXコードで前景色（テキストの色）と背景色を設定します。
WCAGのAA・AAAレベルに対して、通常テキスト・大きいテキスト・UIの合否が表示されます。
コントラスト比が4.5:1以上でAA合格、7:1以上でAAA合格となります（通常テキスト）。
Webアクセシビリティ対応や読みやすいデザイン制作にお役立てください。
デザイン調整で見るべき点
- •生成したCSSや色は、ライト/ダークモード、モバイル、ブラウザ差で見え方が変わります。
- •色やコントラストは見た目だけでなく、読みやすさとアクセシビリティを基準に確認してください。
- •装飾値はそのまま採用するより、既存デザインシステムの余白・角丸・影に合わせて調整すると破綻しにくくなります。
関連ツール
🎨🖥️🌈🌈🖼️🎨🖌️🔤📱🔖📐🎬
カラーコード変換
HEX・RGB・HSLのカラーコードを相互変換。プレビュー付きで色を確認。
アスペクト比計算
画面の幅と高さからアスペクト比を計算。動画・画像サイズに。
HTMLカラー名一覧
CSS/HTMLカラー名とコードを検索。127色対応。
CSSグラデーション生成
グラデーションCSSコードを視覚的に生成。
CSSボックスシャドウ生成
box-shadowをスライダーで視覚的に生成。
ランダムカラー生成
ランダムな色をHEX/RGB/HSLで生成。
カラーパレット生成
ベースカラーから配色パレットを自動生成。
フォントプレビュー
テキストを様々なフォントで比較プレビュー。
OGP画像サイズ一覧
SNS別のOGP推奨画像サイズを一覧表示。
ファビコンプレビュー
テキストや絵文字からファビコンをプレビュー。
ピクセル⇔cm変換
DPI指定でpx/cm/mm/inchを相互変換。
CSSアニメーション生成
CSSアニメーションを視覚的に生成。