アクセシブル・カラーパレットジェネレーター

アクセシブルなカラーパレット ジェネレーターとは何か?

アクセシブルなカラーパレット ジェネレーターは、ウェブサイト、アプリ、または印刷デザインのために、一緒に表示されることを意図したすべての色のペア(背景上のテキスト、キャンバス上のボタン、フィールド上のラベル)がWCAGコントラスト要件を満たすように色のセットを組み立てるのを助けるツールです。要点は、低コントラストの組み合わせを監査時ではなく設計時に捕捉することです。パレットに色を追加し、ツールがすべてのペア間のコントラスト比を計算し、各ペアにAAA合格、AA合格、または不合格のラベルを付けます。実際に使用する予定のすべてのペアが合格するまで反復します。

コントラスト比は1:1(同一の色、見えない)から21:1(白上の黒)までの数字です。WCAG 2.2達成基準1.4.3は標準サイズの本文テキストに4.5:1(レベルAA)、大きなテキスト(24px以上の通常または18.66px以上の太字)に3:1、グラフィカル要素とUIコントロールに4.5:1(SC 1.4.11)を要求します。WCAG AAAは本文テキストを7:1に、大きなテキストを4.5:1に上げます。ほとんどの公開ウェブサイトはADA、EAA、AODA、および類似の法律に従って少なくともAAを満たす必要があります。多くの管轄区域の政府サイトはAAAを満たす必要があります。

このツールはブラウザで動作します。カラーピッカーで色を選び、ツールはWCAG指定の式を使用して相対輝度とコントラスト比を計算し、グリッドが各ペアのステータスを表示します。最終パレットをCSSカスタムプロパティ(var(--brand-primary))、HEXリスト、Tailwind設定スニペット、またはデザイントークン用のJSONとしてエクスポートできます。何もアップロードされません。パレット全体があなたのデバイスに残ります。

ツールの中身

ツールの上部はカラーピッカーとパレットへの追加ボタンです。色を選び、名前を付け(ブランドプライマリ、サーフェス、本文テキストなど)、追加します。パレットは左側にスウォッチリストとして成長します。任意のスウォッチを編集、削除、またはドラッグして並べ替えできます。事前定義されたアクセシブルパレットは出発点として利用可能です(高コントラストペア、IBM Carbonスタイルで設計されたパレット、Material Design 3トーナルパレット)。1つを選び、カスタマイズします。

コントラストグリッドはすべてのペアのスウォッチを取り、各WCAGレベルのコントラスト比と合格/不合格バッジを表示します: AA-normal (4.5:1)、AA-large (3:1)、AAA-normal (7:1)、AAA-large (4.5:1)。4.7:1として表示されるペアはAA-normalに合格しますがAAA-normalに不合格です。2.1:1として表示されるペアはすべてに不合格です。セルにホバーしてペアを実際のテキストとしてプレビューします。比率でグリッドをソートして最悪のペアを最初に見つけます。

エクスポートパネルはツールチェーンが期待する方法でパレットをフォーマットします: 最新のCSS用のCSSカスタムプロパティ、古いパイプライン用のSass変数、Tailwind CSS用のTailwindテーマ設定、クロスプラットフォームデザインシステム用のJSONデザイントークン(Style Dictionary、W3C Design Tokens Community Group spec)、またはFigmaに貼り付けるだけのHEXリスト。命名規則は保持されます。コードベースに直接コピー&ペーストできます。

歴史と背景

CIE比色測定が科学的色を確立(1931)

国際照明委員会(CIE)は1931年にCIE 1931色空間を公開しました。これは人間が電磁スペクトルから色をどのように知覚するかの最初の正式な数学的記述です。すべての最新の色システム(RGB、HSL、OKLCH、Lab、XYZ)はCIE 1931を直接または派生した変換を介して構築します。WCAGがコントラストを計算するために使用する相対輝度の式は、CIE派生の計算です: 人間の目が各チャネルにどれだけ強く反応するか(緑が最も、青が最も少ない)で赤、緑、青のチャネルを重み付けします。

WCAG 1.0がコントラストガイドラインを導入(1999)

Web Content Accessibility Guidelines 1.0(W3C、1999年5月)は、コントラストを正式なアクセシビリティ基準として導入しました(チェックポイント 2.2: 前景色と背景色の組み合わせが十分なコントラストを提供することを保証する)。最初のバージョンは質的でした。閾値はあいまいでした。WCAG 2.0(2008年12月)は、WCAGの相対輝度式を使用して数値的なコントラスト比を最初に指定しました。2.0の4.5:1と7:1の閾値は、2.1(2018)と2.2(2023)を通じて変更されずに維持されています。なぜなら、ほとんどの障害(低視力、加齢関連のコントラスト感度損失、色覚異常)にわたる可読性と実用的な設計上の制約のバランスをとるからです。

色コード化されたデザインシステムが成熟(2014年以降)

GoogleのMaterial Design(2014)、IBMのCarbon Design System(2015)、そしてデザイントークンのより広範な台頭(Salesforce 2014、Atlassian 2016)はすべて、アクセシブルな色をシステムレベルの懸念事項として前面に押し出しました。Material Design 3(2021)はトーナルパレット(色相ごとに13ステップの明度ランプ)を導入しました。これは、明度スケールで600+の任意のトーンが白に対して4.5:1のコントラストに合格するように明示的に設計されています。このシフトにより、デフォルトでアクセシブルなパレットが最新のデザインシステムの標準的な実践となり、古いブランドファースト・アクセシビリティ・セカンドアプローチを置き換えました。

APCAがより正確な代替として提案される(2019年以降)

Accessible Perceptual Contrast Algorithm(APCA)は、Andrew SomersによってWCAGのコントラスト式の知覚的により正確な代替として2019年から提案されました。WCAGコントラストは明るい色の可読性を過大評価し、暗い背景上の暗いテキストを過小評価します。APCAはこれらを修正します。WCAG 3.0(2.xのドラフト後継、何年も開発中)はAPCAまたは類似の改善されたアルゴリズムを採用すると予想されます。WCAG 3が公開され法律で採用されるまで、WCAG 2.xコントラスト比は法的および業界標準のままです。このツールはWCAG 2.x式を使用します。

デザイントークンがクロスプラットフォーム標準になる(2020年以降)

W3C Design Tokens Community Groupは2020年に形成され、デザイントークン(CSS、iOS、Android、Figma、および他のプラットフォーム間で翻訳される名前付きの色、間隔、タイポグラフィ値)を標準化しました。Style Dictionary、Tokens Studio、および新興のW3C specのようなツールはすべて、機械可読のトークン形式に依存しています。アクセシブルなカラーパレットはますますデザイントークンとして出荷されるので、同じ検証済みパレットがあらゆる場所で使用され、ウェブサイトはコントラストに合格するがモバイルアプリは合格しないという失敗モードを排除します。

OKLCHと知覚的に均一な色空間(2020年以降)

CSS Color Module Level 4(2024年候補勧告)は、OKLCH、OKLab、Lab、LCH、および他の知覚的に均一な色空間をネイティブCSSに追加しました。OKLCH(Bjorn Ottossonによって2020年に導入)は、HSLとは異なり、明度のステップが視覚的に不均一なジャンプを生じるのとは異なり、等しい明度ステップが目に等しく見えるため、アクセシブルなパレットの生成に特に役立ちます。最新のパレットジェネレーター(AdobeのLeonardo、Polychrom、OKLCH入力モードに設定したときのこのツール)はこれらの空間を活用して、同じ明度レベルでコントラスト目標を満たす視覚的により一貫したパレットを生成します。

実用的なワークフロー

新しいブランドパレットの設計

維持しなければならないブランドカラー(ロゴカラー、マーケティングチームに祝福された主要色)から始めます。パレットに追加し、ティント(より明るいバージョン)とシェード(より暗いバージョン)とニュートラル(白、サーフェス、サーフェスバリアント、テキスト)を構築します。すべてのテキスト・オン・バックグラウンドペアをAA-normalに対してチェックします。プライマリブランドカラーが白で失敗する場合、2つのオプションがあります: 大きな要素(ロゴ、装飾的なアクセント)にのみ使用し、本文テキストを暗いバリアントとペアにするか、ブランドカラーを少し妥協します。このツールは設計時にそれらの選択を浮かび上がらせます。

既存サイトの色決定の監査

既存のデザイントークン(CSSカスタムプロパティ、Tailwind config、Sass変数)から色の値を引き出し、このツールに入力し、コントラストグリッドをレビューします。よくある失敗: 白上のミュートされたグレーテキスト(よく#999または#aaaで、2.8:1または2.5:1を与える)、ボタンがミッドトーンで白いテキストを持つブランドカラーボタン、忙しい背景上のリンクカラー。失敗をその比率とそれが違反するWCAG基準で文書化します。その文書化が修復計画の始まりです。

チャートとデータビズのアクセントカラーの選択

データの可視化には、チャートの背景に対するコントラストを通過し、色覚異常のユーザーにとって互いに区別可能なアクセントカラーが必要です。このツールをColorBrewer(Cynthia Brewer、Penn State、2002)と組み合わせます。これは色覚異常シミュレーションの下でも区別可能なように設計されたパレットを公開しています。候補のパレットを両方のツールで実行します: 背景に対するコントラスト(このツール)、パレットの色間の区別可能性(ColorBrewerまたはViz Palette)。

ライトパレットへのダークモード補完の構築

ダークモードは反転したライトモードではありません。コントラスト要件は依然として適用されますが、目はダーク上のライトテキストをライト上のダークテキストとは異なって知覚します(APCAの議論はこれについてのほとんどです)。ダークパレットを名前付きトークンの並列セット(surface-dark、text-dark、accent-dark)として構築し、すべてのダークモードペアをAAに対してチェックします。よくあるダークモードの失敗: 純粋な白(#fff)が純粋な黒(#000)上ではハレーション(光のにじみ)を引き起こすので、デザイナーはしばしば#e5e5e5を#121212上で使用します。これは依然としてAAに合格しますが、読むのにより快適です。

異なるサーフェス用のパレットバリアントを生成

最新のUIには複数のサーフェスレベルがあります(背景、カード、カード昇格、モーダル、ポップオーバー)。各サーフェスはその上で使用されるすべてのテキストとアクセントカラーと正しくペアにする必要があります。各サーフェスをパレットスウォッチとして追加し、各テキストカラーを各サーフェスに対してチェックします。コントラストグリッドは、テキスト・オン・カードペアが合格するときにテキスト・オン・モーダルペアが失敗するかどうかをすばやく示します(モーダルは通常昇格を示すためにわずかに異なる背景の色合いを持っており、これにより気付かないうちにコントラストがAAを下回る可能性があります)。

法的または監査提出のためのコンプライアンス文書

ADAまたはEAAコンプライアンス文書のために、通常、デザインシステム内のすべての色の組み合わせが関連するWCAGレベルに合格することを示す必要があります。製品のアクセシビリティステートメントまたはVPAT(Voluntary Product Accessibility Template)の一部としてパレットとコントラストグリッドをエクスポートします。エクスポートされたJSONは、自動化されたコンプライアンスレポートにフィードするのに十分な構造化されています。視覚的グリッドは人間のレビューに適しています。

よくある落とし穴

ブランドカラーを触れないものとして扱う

最も一般的なパターン: マーケティングは企業のプライマリカラーを主張しますが、白でAAコントラストに失敗します。オプション: ブランドカラーを大きなまたは装飾的な要素にのみ使用する(より寛容な3:1の大きなテキストバーに合格)、テキスト使用のために色を少し暗くする(ほとんどのブランドはより暗いバリアントの柔軟性を持っている)、または本文テキストの色を黒からそれほど厳しくない暗い灰色に変更してブランドカラーがアクセントとして読めるようにする。Leonardo(Adobeから)のようなツールはブランドカラーのアクセシブルなバリアントを自動的に生成します。検証のためにこのツールとペアにしてください。

コントラストを唯一のアクセシビリティチェックとして使用する

コントラストを通過することは可読性を保証しません。4.5:1の比率は床です。一部のユーザー(低視力、加齢関連のコントラスト感度損失、失読症)はより高い比率から恩恵を受けます。WCAG SC 1.4.6(コントラスト強化、AAA)は本文テキストに7:1を推奨します。なぜなら4.5:1は最小であり目標ではないからです。十分なフォントサイズ(本文は16px以上)、適切な行の高さ(フォントサイズの1.5倍)、文字の形状を保持するフォントの選択(本文テキストには極細のウェイトを避ける)と高コントラストを組み合わせます。

テキスト以外のコントラスト(SC 1.4.11)を忘れる

WCAG 1.4.11(WCAG 2.1、2018年に追加)はUIコンポーネントとグラフィカル要素に3:1のコントラストを要求します: フォームフィールドの境界線、ボタンの輪郭、アイコン、フォーカスインジケーター。これは、デザイナーがコントラストがテキストにのみ適用されると考えるため、簡単に見逃されます。白上の微妙なグレーフィールド境界線を持つクリーンなフォームは、すべてのテキストが1.4.3に合格しても1.4.11に失敗する可能性があります。背景上のテキストだけでなく、意味または状態を伝えるすべての視覚要素を監査します。

大きなテキストルールの間違い

WCAGの大きなテキスト閾値(4.5:1ではなく3:1)は18pt以上のテキスト(約24px)、または14pt太字(約18.66px太字)に適用されます。それより小さいものはすべて通常のテキストで4.5:1が必要です。デザイナーはすべての見出しレベルに3:1の大きなテキストルールを適用することがありますが、16pxのh5はWCAGの定義では通常のテキストです。見出しレベルではなく、レンダリングされたサイズを確認します。太字修飾子が重要です: 18px太字は大きなテキストとして合格します。18pxレギュラーは合格しません。

情報を伝えるために色だけに頼る

WCAG 1.4.1(色の使用、レベルA)はコントラストとは別です。完璧なコントラスト比でも、色を状態の唯一のインジケーターとして使用することはできません(赤は無効、緑は有効、青はリンクを意味する)。色を2番目の手がかりとペアにします: アイコン(エラーの警告三角形)、パターン(リンクの下線)、またはテキストラベル(必須フィールドの隣にRequired)。色覚異常のユーザー(男性の約8%、女性の0.5%)とグレースケールモノクロ画面のユーザーはこれらの二次的な手がかりに依存します。

ホバー、フォーカス、アクティブ状態を忘れる

ボタンがデフォルト状態でコントラストに合格しますが、:hoverスタイルが閾値を下回って明るくします。:focusの輪郭はボタンの背景に対して3:1に失敗する微妙なグレーです。:activeステートが色を反転し、新しい組み合わせが失敗します。コントラストグリッドのすべてのインタラクティブな状態をテストし、デフォルトだけではありません。特にフォーカスインジケーターは重要です(SC 2.4.7 Focus Visible、AA): フォーカスが明確に見えない場合、キーボードのみのユーザーはページ上で自分の場所を失います。

プライバシーとデータ処理

追加する色、パレットの名前、エクスポートされたトークンはすべてあなたのブラウザに残ります。コントラスト計算はあなたのマシンのJavaScriptで実行されます。何もアップロードされません。これは文書よりもカラーパレットにとってはあまり重要ではありませんが、パレットが未公開のブランド刷新や機密のクライアントプロジェクトの一部である場合は依然として重要です: 起動前にサードパーティのSaaSバリデーターに漏れたくはありません。

ページがロードされると、ツールはオフラインで動作します。インターネットから切断し、パレットを構築し、チェックを実行し、エクスポートできます。エクスポートされたトークンはブラウザの通常の保存ダイアログを介して直接ダウンロードされます。多くのクラウドカラーツール(Coolors、Adobe Color、一部のアクセシビリティチェッカーでさえ)はパレットをサーバー側に保存し、分析またはトレーニングに使用する可能性があります。機密作業には、クライアント側ツールを優先してください。

このツールを使用しない場合

完全な色覚異常シミュレーションのために(専用ツールを使用)

コントラストは色覚異常の互換性と同じではありません。パレットはすべてのコントラストチェックに合格しても、色覚異常のユーザーを混乱させる可能性があります(同じ輝度の赤と緑はデュータラノピアには同一に見えます)。色覚異常シミュレーションには、Absolutool Color Blindness SimulatorまたはAdobe Colorのアクセシビリティビューを使用してください。どちらも実際のデュータラノピア、プロタノピア、トリタノピアの色変換を適用します。候補のパレットをこのツールとシミュレーターの両方で実行します。

ゼロから配色を生成するために(LeonardoまたはCoolorsを使用)

このツールはパレットをチェックして監査します。単一のシード色からそれらを生成しません。ゼロからのパレット生成(類似、補色、トライアド、スプリット補色スキーム)には、Adobe Color、Coolors、またはLeonardo(ブランドカラーのアクセシブルなバリアントを生成)を使用します。それらのツールで生成し、その後このツールで検証します。Leonardoは特定のコントラスト比をターゲットとした色を特に生成し、これはこのツールの検証ステップの自然な入力形式です。

APCAベースのコントラストのために(WCAG 3が出荷されるとき)

このツールはWCAG 2.xコントラスト式を使用します。これは現在の法的および業界標準です。APCA(提案されたWCAG 3アルゴリズム)用に特に設計する必要がある場合は、Myndex ResearchのAPCA Contrast Calculatorを使用してください。APCAは特に暗い上の暗いテキストと明るい上の明るいテキストに対して異なる(そして間違いなく知覚的により正確な)評価を生成します。WCAG 3が批准され法律で採用されるまで(おそらく数年先)、WCAG 2.xはコンプライアンス監査人がチェックするものです。

完全なWCAG監査のために(包括的なツールを使用)

コントラストは数十の基準の1つです。完全なアクセシビリティ監査には、axe DevTools、Lighthouse、WAVE、またはTenonやPowerMapperのような有料ソリューションを使用します。これらは1回のパスでコントラスト、altテキスト、ARIA、フォームラベル、フォーカス順序、見出し構造などをチェックします。パレット設計中にこのツールを使用し、統合テスト中に包括的なツールを使用します。

その他の質問

AAコントラストとAAAコントラストの違いは何ですか?

AAは標準で、ほとんどのアクセシビリティ法律(ADA、EAA、AODAなど)で法的に必要であり、すべての公開サイトが満たすべきものです。AAAはより厳格です: 本文テキストに7:1、大きなテキストに4.5:1。AAAは通常、高いステークスのコンテンツ(一部の管轄区域の政府ウェブサイト、医療および法的情報、主要な対象として低視力のユーザー向けのコンテンツ)にのみ必要です。AAA向けに設計することは制限的です。重要な色の制限なしにそれを満たすことができるブランドはほとんどありません。デフォルトでAAを目指し、コンテンツの対象が正当化する場合はAAA。

なぜWCAGは特に4.5:1を使用するのですか?

4.5:1の閾値は、20/40視力のユーザー(多くの管轄区域での法的盲目の閾値)が補助拡大なしでテキストが読みやすいままになるように選ばれました。これはまた、色覚異常のユーザーが前景と背景を確実に区別できる、概算のコントラスト比です。数字は視力研究から経験的に較正されています。それは恣意的ではありません。AAAの7:1は概算で20/80視力に対応し、より多くの障害を収容します。

コントラストの式はどのように機能しますか?

各色をsRGBから相対輝度に変換するには、次の式を使用します: 区分関数(低い値には線形、高い値には指数)を適用して各チャネル(R、G、B)をガンマ補正し、0.2126 R + 0.7152 G + 0.0722 B(各チャネルへの人間の目の相対感度)で重み付けします。2つの色のコントラスト比は(L1 + 0.05) / (L2 + 0.05)です。L1は明るい方の輝度、L2は暗い方です。0.05のオフセットは環境画面の反射を考慮します。結果は1(同一)から21(最大)までの数値です。

フォームフィールドのプレースホルダーテキストのコントラストを心配する必要がありますか?

はい。プレースホルダーテキストはWCAGの下でテキストとしてカウントされ、4.5:1コントラストを満たす必要があります。プレースホルダーのブラウザのデフォルトは薄いグレー(ほとんどのブラウザで#a9a9a9)で、白で失敗します。CSSでオーバーライドします: ::placeholder { color: #595959; } またはAAに合格する類似のもの。さらに良いのは、重要なフィールドではプレースホルダーを完全に避けることです。フィールドの上に表示ラベルを使用し、プレースホルダーは例のフォーマット用に予約します。フローティングラベルパターンは表示ラベルと例の明確さを組み合わせます。

コントラストは無効化されたボタンとフォームフィールドに適用されますか?

いいえ。WCAG SC 1.4.3は無効化されたコントロールを明示的に免除します。なぜなら、ミュートされた外観自体がコントロールが利用できないという視覚的シグナルだからです。無効化されたボタンは通常、約38%の不透明度に薄められ、設計により無効化された状態でコントラストに失敗します。ただし、無効化された状態は依然として有効化された状態と明確に区別できる必要があるため、すべての視覚的処理を単に削除しないでください。明確な視覚的違いとスクリーンリーダーがアクセスできる無効化属性を使用します。

チャートやアイコンのようなグラフィカルコンテンツのコントラストはどうですか?

WCAG 1.4.11非テキストコントラスト(2.1で追加)はUIコンポーネント(ボタン、フォームの境界線、フォーカスインジケーター)と意味のあるグラフィカル要素(状態を伝えるアイコン、データシリーズを区別するチャート要素)に3:1のコントラストを要求します。3:1の閾値は、グラフィックが一般的により大きな可視領域を持っているため、テキストの4.5:1よりも低いです。意味を伝えない装飾的なグラフィックは免除されます。状態を伝えるすべてのアイコン(可視のための開いた目、削除のためのX、選択のためのチェックマーク)と区別する必要があるすべてのチャートセグメントに3:1を適用します。