Sphere
Stacking

カラーコントラストチェッカー

前景色と背景色のコントラスト比を計算し、WCAG（Web Content Accessibility Guidelines）の 基準を満たしているかチェックします。

サンプルの組み合わせ

前景色（テキスト）

背景色

コントラスト比

21.00:1
WCAG AA: 合格
WCAG AAA: 合格
通常のテキストとして評価

プレビュー

The quick brown fox jumps over the lazy dog

日本語のサンプルテキスト: 私は猫です。名前はまだありません。

小さなテキスト (12px): Lorem ipsum dolor sit amet

テキスト設定

WCAG基準の詳細

基準通常のテキスト大きなテキスト現在の状態
WCAG AA 4.5:1 以上3:1 以上
合格
WCAG AAA 7:1 以上4.5:1 以上
合格

※ 大きなテキスト: 24px以上、または18px以上の太字

CSS変数生成

機能説明

WCAG基準について

  • AA基準: 最低限のアクセシビリティ要件
  • AAA基準: より高いアクセシビリティ要件
  • 大きなテキスト: 24px以上、または18px以上の太字

色覚異常シミュレーション

  • 世界の男性の約8%、女性の約0.5%が何らかの色覚異常を持つ
  • 最も一般的なのは赤緑色覚異常（第1・第2色覚異常）
  • シミュレーションで実際の見え方を確認できます

推奨色の提案

  • 現在の色を基準にWCAG基準を満たす色を自動生成
  • 明度調整と色相シフトで複数の選択肢を提供
  • クリックして直接適用可能