画像テキストカラー開発ファイルAI計算お役立ち

配色黄金比（70:25:5）ジェネレーター

ポスト

Webデザインの黄金比「70:25:5」に基づいた配色を自動構成します。
デフォルトでWCAG 2.1の基準をクリアするように調整されています。

  1. 基準色の選択: 左パネルで主役の色を選びます。
  2. 視認性チェック: 右パネル上部の数値が「PASS（4.5以上）」であることを確認します。
  3. シミュレーション: 下部のモックアップで面積比のバランスを確認します。
  4. 個別微調整: カラーカードをクリックしてピッカーを開き、微調整してPASSを目指すことも可能です。
ベース (70%)
メイン (25%)
アクセント (5%)
視認性チェック (WCAG 2.1)
推奨基準：4.5 以上
判定中
背景 × メイン文字
0.0
判定中
メイン背景 × 白文字
0.0
判定中
アクセント背景 × 文字
0.0
面積比シミュレーション
SERVICEABOUT
WCAG PASS

Standard Colors

この配色は、アクセシビリティ基準（WCAG 2.1）を満たすように調整されています。

ACTION BUTTON
Base Contents Area

すべてのユーザーにとって読みやすい配色を目指しましょう。

※各カラーコードをクリックしてコピーできます

同じカテゴリのツール

カラー総合ツール（変換・パレット・コントラスト・グラデーション）
グラスモーフィズム生成（Glassmorphism）｜無料Webツール集
画像色覚シミュレーター（CUD画像検証ツール）
日本の伝統色検索ツール
ニューモーフィズム生成（Neumorphism）｜無料Webツール集
OKLCH カラーピッカー＆変換ツール｜無料Webツール集
フォト・グラデーション・ジェネレーター
Shades & Tints 生成（明度・暗度スケール）｜無料Webツール集
Tailwind カラースケール生成（OKLCH対応）｜無料Webツール集
色覚シミュレーター（カラーユニバーサルデザイン確認）