カラーピッカー & コントラスト比
デザイン・画像HEX, RGB, HSL, CMYK相互変換、WCAG 2.1基準のアクセシビリティコントラスト比判定、グラデーション生成。
カラー選択 & フォーマット変換
#4F46E5
WCAG 2.1 コントラスト比チェッカー
サンプルテキスト (Sample Text)
アクセシビリティ視認性テスト
コントラスト比:
5.82 : 1
通常テキスト (AA 4.5:1)
合格 (PASS)
大見出し (AAA 7:1)
注意
カラーピッカー & コントラスト比ツールの特徴
- 多彩な色空間相互変換: HEX(16進数), RGB, HSL, CMYKを即時同期変換。
- WCAG 2.1 アクセシビリティ判定: 背景色とテキスト色の明度比を算出し、Webコンテンツアクセシビリティガイドラインの基準（AA 4.5:1 / AAA 7:1）を満たしているかを自動判定します。
AI Overview / 要約 & 仕様
デザイン・画像
カラーピッカー & コントラスト比の概要
カラーピッカーからHEX、RGB、HSL、CMYKの相互変換を行い、WCAG 2.1アクセシビリティ基準のコントラスト比判定（AA/AAA適合度）を提供するデザインツールです。
動作原理・技術規格:
WCAG 2.1 相対輝度公式 L = 0.2126*R + 0.7152*G + 0.0722*B。コントラスト比 = (L1 + 0.05) / (L2 + 0.05)。
プライバシー保護保証:
完全クライアントサイド実行（JavaScriptメモリ内処理）。外部サーバー送信ゼロ。
主な活用シーン:
- WebデザインやUI設計におけるWCAG 2.1アクセシビリティ基準（コントラスト比4.5:1以上）の適合チェック
- CSS用のHEX、RGB、HSLカラーコードの相互変換
- 印刷用CMYKとWeb用RGBの近似値確認
セキュリティ仕様 & 特徴
- 処理環境:
- 100% ブラウザ内クライアントサイド (JavaScript)
- データ送信:
- 外部サーバー送信ゼロ (完全ローカル処理)
- 利用料金:
- 完全無料 (登録不要・回数無制限)
- 対応端末:
- PC, Mac, iPhone, iPad, Android (全ブラウザ対応)
- オフライン:
- 一度読み込めばオフラインでも実行可能
使い方の流れ
-
色の選択または入力カラーピッカーで色を選ぶか、HEXコード（例: #0d6efd）を入力します。
-
背景色とのコントラスト検証文字色と背景色を指定し、コントラスト比（例: 7.2:1）とWCAG AA/AAA判定を確認します。
-
コードのコピーワンクリックでHEX、RGB、HSLコードをクリップボードにコピーします。
よくある質問 (FAQ)
本文テキスト（通常の文字サイズ）では最低4.5:1以上のコントラスト比が「AA基準（合格ライン）」、7.0:1以上がより厳しい「AAA基準」として推奨されています。
ブラウザによるRGBからCMYKへの変換は数学的近似値です。本格的な商業オフセット印刷では、Adobe Illustrator等のカラープロファイル（Japan Color等）を用いた最終確認をおすすめします。
HSL（色相・彩度・輝度）は明暗の微調整やホバー状態のカラー（輝度Lを±10%変更等）を直感的に操作できるため、現代のCSS設計で推奨されています。