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

Color Contrast Grid Generator

開発者

広告削除する？

入力

出力

クライアント側

広告削除する？

ガイド

Color Contrast Grid Generator

ブランドまたはデザインシステムのカラーを入力すると、すべての可能な前景/背景の組み合わせのコントラスト比を示す完全なWCAGコントラストマトリックスが生成されます。アクセシビリティ要件を満たすか、AAA、AAに合格する色のペアを即座に確認できます。これは、アクセシブルなデザインシステムとスタイルガイドの構築に不可欠です。

使用方法

1行に1つのHEXカラーを入力するか（「プライマリ #3B82F6」などのオプションのラベル付き）、プリセットパレットを選択します。コントラストマトリックスを作成するには、「作成」をクリックします。各セルには、WCAG準拠レベルで色分けされた実際の前景色と背景色のコントラスト比が表示されます。 グリッドを生成 N×Nコントラストマトリックス

機能

– すべての前景/背景の組み合わせがテストされ、視覚的なグリッドに表示されます WCAGカラーコーディング
– AAA（7:1以上）は緑、AA（4.5:1以上）は黄色、失敗（4.5:1未満）は赤 – 各セルは実際の前景色と背景色でレンダリングされます
ライブカラープレビュー AAラージテキスト
– AAラージテキスト（3:1以上）の準拠も示します（大きなフォントサイズの場合） 概要統計
– テストされた合計ペア数、AAA合格数、AA合格数、および失敗数を一目で確認できます プリセットパレット
– Tailwind、Material Design、またはモノクロのカラーパレットをクイックロードできます 最大20色
– 2色から20色のパレットをサポートします – すべての計算はブラウザ内で行われます
クライアントサイドのみ ブラウザ内で全ての計算が行われます。

広告削除する？

 よくある質問

WCAG（Web Content Accessibility Guidelines）は、テキストの可読性のためのコントラスト比を定義しています。AAA（7:1以上）は最も高い基準であり、中程度の視覚障害のあるユーザーでもテキストが読みやすいことを保証します。AA（4.5:1以上）は、通常のサイズのテキストの最低基準です。AAラージ（3:1以上）は、18pt以上の（または14ptの太字）テキストに適用されます。ほとんどのアクセシビリティ法および標準では、Webコンテンツには少なくともAA準拠が必要です。

個別にペアをチェックするのではなく、コントラストグリッドが必要なのはなぜですか？
コントラストグリッドは、パレット内のすべての可能な色の組み合わせを一度に表示し、個別にペアをチェックしても見逃してしまう問題点を明らかにします。デザインシステムには通常8〜15色あり、さまざまな前景/背景の組み合わせで使用される可能性があります。10色のグリッドは100ペアを同時にテストし、どの組み合わせがアクセシブルで、どれがそうでないかを即座に表示します。これは、デザインチーム向けの包括的なアクセシビリティドキュメントを作成するために不可欠です。

コントラスト比はどのように計算されますか？
WCAGコントラスト比は、線形化されたsRGB値から計算された相対輝度を使用します。各カラーチャンネルは、次の方程式を使用してガンマエンコードされたsRGBから線形光に変換されます。sRGB値が0.03928以下の場合、12.92で割ります。それ以外の場合は、（値+ 0.055）/ 1.055を2.4乗します。相対輝度は0.2126×R + 0.7152×G + 0.0722×Bになります。コントラスト比は（明るい輝度+ 0.05）/（暗い輝度+ 0.05）であり、常に1:1から21:1の間の値になります。

HEXカラーを入力します。1行に1つずつ…#FFFFFF 白#000000 黒#3B82F6 青#EF4444 赤