広告が嫌いですか? 行く広告なし今日 

アクセシブルなカラーペアファインダー

開発者数学

広告削除する？

入力

自動処理

出力

クライアント側

広告削除する？

ガイド

アクセシブルなカラーペアファインダー

あらゆる背景色に対してWCAGアクセシビリティ基準を満たすフォアグラウンドカラーを見つけます。背景色を入力すると、ツールはHSLカラー空間を検索して、AAまたはAAAのコントラスト準拠を達成するテキストカラーのパレットを生成します。サンプルテキストで各ペアをプレビューし、特定の色合いの組み合わせを確認し、CSSカスタムプロパティとしてアクセス可能なペアをエクスポートします。

使用方法

カラーピッカーまたは16進数入力を使用して背景色を選択または入力します。ツールはすぐにカラー空間をスキャンし、選択したWCAGレベルに合格する推奨フォアグラウンドカラーのグリッドを表示します。スウォッチをクリックすると、背景色に対するテキストとしてプレビューされます。特定の色合いのペアを確認するには、背景色とフォアグラウンドカラーの両方に入力し、AA通常、AA大、およびAAAレベルのインスタント合格/不合格バッジを確認します。選択したペアをCSSカスタムプロパティとしてエクスポートし、スタイルシートに直接使用できるようにします。

機能

WCAGコントラスト計算 – WCAG 2.1仕様ごとの正確な相対輝度およびコントラスト比計算
HSLグリッド検索 – 色相、彩度、明度を体系的に検索して、合格するすべてのフォアグラウンドカラーを見つけます
ライブテキストプレビュー – 選択した背景色でレンダリングされたサンプル通常および大サイズのテキストを、各推奨カラーで表示します
AAおよびAAA準拠 – AA通常（4.5:1）、AA大（3:1）、AAA（7:1）のコントラストしきい値間を切り替えます
特定ペアチェッカー – 任意の2色を入力して、すべてのWCAGレベルのインスタント合格/不合格結果を取得します
色相別カラースウォッチ – 閲覧しやすいように、色相ファミリー別に整理された提案
輝度計算式表示 – WCAG相対輝度計算および透明度の値を表示します
CSSエクスポート – アクセシビリティの高いペアをCSSカスタムプロパティとしてコピーし、スタイルシートですぐに使用できるようにします

広告削除する？

 よくある質問

WCAG コントラスト比とは何ですか？また、なぜ重要ですか？

WCAG（Web Content Accessibility Guidelines）は、視覚障害のある方々の可読性を確保するために、テキストと背景色の間の最小コントラスト比を定義しています。コントラスト比は、1:1（コントラストなし）から21:1（最大、白黒）の範囲です。レベルAAは、通常のテキストで4.5:1、大きなテキストで3:1を必要とします。レベルAAAは、通常のテキストで7:1を必要とします。これらの基準を満たすことで、約12人に1人の男性と200人に1人の女性の色の視覚異常、およびロービジョンの人々にもウェブサイトがアクセス可能になります。
AAとAAAの準拠の違いは何ですか？

AAは推奨されるアクセシビリティの最低レベルであり、通常のサイズのテキストで4.5:1、大きなテキスト（18ptまたは14ptの太字以上）で3:1のコントラスト比が必要です。AAAは最高レベルであり、通常のテキストで7:1、大きなテキストで4.5:1が必要です。ほとんどの組織は、良好なアクセシビリティを提供し、合理的なデザインの柔軟性を可能にするため、AA準拠を目標としています。AAAは、政府や医療サイトの本文のような重要なコンテンツに最適です。文字が大きいほど可読性が高いため、大きなテキストにはより低い要件があります。
相対輝度はどのように計算されますか？

相対輝度は、色の知覚される明るさを0（黒）から1（白）のスケールで測定します。WCAGの計算式は、まずsRGB値を0〜255）を255で割って線形RGBに変換し、ガンマ補正を適用します。値が0.04045以下の場合は12.92で割ります。値が高い場合は0.055を加え、1.055で割り、2.4乗します。最終的な輝度は、赤の0.2126倍、緑の0.7152倍、青の0.0722倍です。これらの重みは、緑が最も寄与するため、人間の目が明るさをどのように知覚するかを反映しています。
ブランドカラーの選択にこのツールを使用できますか？

はい。ブランドの背景色を入力すると、アクセシビリティ基準を満たすすべてのテキストカラーが表示されます。これは、カラーパレットがアクセシビリティの高いウェブデザインで機能することを保証する必要があるブランド開発または再設計中に特に役立ちます。既存のブランドカラーペアをチェックして、WCAG要件を満たしていることを確認することもできます。CSSエクスポート機能を使用すると、アクセシビリティの高いペアをスタイルシートに直接コピーでき、開発時間を節約し、最初から準拠を確保できます。