記事
画像からアクセシブルなカラーパレットを抽出する
写真やブランドアセットには、完全なカラーシステムの種が含まれていることがよくあります。その種を抽出し、使えるパレットに仕上げ、アクセシビリティ標準に対して検証するには、3つの異なるステップが必要です。この記事では、パレット抽出の仕組み、実際の使用のための色の選択と調整方法、WCAGしきい値に対するコントラストの確認方法、そして色覚障害のあるユーザーにとって潰れるペアの発見方法を順に解説します。
パレット抽出の仕組み：ピクセルサンプリングと色量子化
すべてのデジタル画像はピクセルのグリッドで、各ピクセルはRGBのような空間での色値を持ちます。パレット抽出ツールは各ピクセルを個別に検査しません：200万ピクセルの写真には200万のデータポイントがあり、処理が遅く、使えるセットではなく何千もの微妙に異なる色合いが返ってきます。代わりに、ツールは規則的な間隔でピクセルグリッドをサンプリングし、代表的なサブセットを収集します。そのサブセットは色量子化アルゴリズムに入力されます。最もよくあるアプローチは、メジアンカットまたはk-meansスタイルのパーティショニングと呼ばれるクラスタリング手法を使って類似した色をグループ化します。アルゴリズムは色の類似性に基づいて、サンプリングされた各ピクセルを固定数のバケットのいずれかに分類し、各バケットの平均色を計算します。結果は通常4〜16色の小さなリストで、画像内の支配的な視覚的トーンをまとめて説明します。小さな孤立した領域にのみ表示される色は見逃される可能性がありますが、これは欠陥ではなく想定される動作です。
生の支配的な色から使えるパレットへ
パレット抽出ツールの生の出力は頻度順にランクされた色のリストですが、頻度だけではパレットにはなりません。森の写真はUIで異なるアクセントとして使うには類似しすぎた複数の緑を返します。実用的な作業は選択と調整です。まず1つの色をプライマリとして特定します：最も特徴的で最も中立でないもの。残りの色から、プライマリおよびお互いとコントラストがある色を最大2つ探します。それらがアクセントになります。他のすべて、抽出ツールが影や中間調から返すことが多い彩度の低いトーンも含めて、背景とボーダーのニュートラルとして使えます。この大まかな構造ができたら、ほぼ確実に個別の値を調整する必要があります。color-converterツールで各色をhex、RGB、HSLで確認できます。HSLは特に便利です：同じ色族を離れることなく、明度や彩度をシフトして、より密なまたは緩いファミリーを作りながら色相を一定に保てます。
コントラスト確認：読めるテキストのためのWCAGしきい値
テキストと背景の候補色ができたら、その組み合わせが読めるかどうかを確認する必要があります。ウェブコンテンツアクセシビリティガイドライン（WCAG）はこのためにコントラスト比を定義しています。この比率は2つの色の相対輝度を比較します：1:1はコントラストなし（同じ色の上に同じ色）を意味し、21:1が最大値（白の上の黒）です。WCAG 2.1 レベルAAは、通常サイズの本文テキストに少なくとも4.5:1、大きなテキスト（18ptまたは14ptボールド）に3:1の比率を要求します。レベルAAAはそれぞれ7:1と4.5:1のより高いしきい値を設定します。輝度を手計算する必要はありません。重要な点は、良い照明の下であなたには問題なく見えるカラーペアが、画面上で4.5:1を下回る可能性があり、ガイドラインはまさにそのケースのために存在するということです。色を抽出・調整した後は、使用する予定のテキストと背景の全ペアをテストしてください。白の上で読みやすい中間調のグレーが、抽出したパレットの明るいベージュの背景に対しては完全に失敗する可能性があります。
色覚：影響を受けるユーザーにとってペアがどう見えるかをシミュレートする
男性のおよそ12人に1人、女性の200人に1人が何らかの色覚異常を持っています。最も一般的なタイプは第2色覚異常（緑への感受性の低下）で、第1色覚異常（赤への感受性の低下）がそれに続きます。第3色覚異常（青黄への感受性の低下）はより稀です。各タイプで、視覚系は特定の波長を、影響のない視聴者が異なるものとして見る色と同じ知覚色にマッピングします。パレットにとっての実際的な問題は、通常の視覚では明らかに異なって見える2つの色が、色覚障害のあるユーザーにとって同じトーンに潰れる可能性があることです。例えば、成功とエラーを示すために赤と緑だけを使うと、区別の伝達が無効になります。色覚シミュレーションを実行すると、影響を受けるチャンネルが圧縮されたときにパレットがどう見えるかがわかります。ほぼ同一のグレーや茶色に潰れるペアが、再考すべきものです：色相の区別なしにもコントラストが保たれるよう明度差を増やすか、色が唯一のシグナルにならないよう二次的な手がかり（形、ラベル、パターン）を追加します。
ローカルで実行：color-palette、color-blindness、color-converter
この記事で説明した3つのステップはすべて、画像やブランドカラーをサーバーに送ることなく完了できます。color-paletteツールはすべてブラウザ内で実行されます：画像をドロップすると、ローカルでピクセルをサンプリングし、支配的な色をhex値として返します。ファイルは送信されません。color-converterツールはhexコードを受け取り、同じ色をRGBとHSLで表示するので、同じ色族にとどまりながら明度や彩度を的確に調整できます。hexも変換された値もページ内にのみ存在します。color-blindnessツールは逆の流れで動作します。画像をドロップすると、ブラウザで計算された第2色覚異常、第1色覚異常、第3色覚異常のシミュレーションをその画像に適用して表示します。写真ではなくパレットを確認したい場合は、まずスウォッチを画像としてエクスポートまたはスクリーンショットしてから、それをシミュレーターにドロップしてください。3つのツールを順番に使って、画像から抽出し、color-converterで調整し、スウォッチ画像をエクスポートしてcolor-blindnessで確認することで、上記で説明したワークフロー全体をカバーできます。ソース写真に未公開のブランディングやクライアントの未リリースのアイデンティティが含まれている場合に重要で、画像はすべてを通じてデバイス上にとどまります。
この記事で紹介するツール
よくある質問
パレット抽出ツールは通常何色を返しますか？
ほとんどのツールはデフォルトで5〜16色を返しますが、多くは数を設定できます。色を少なくすると、アルゴリズムがより多くのピクセルをグループ化する必要があり、異なるが類似したトーンが統合される可能性があります。色を多くすると、区別して使うのが難しい類似色が生成される可能性があります。UIパレットの場合、6〜8色が通常実用的な出発点です。
画像から抽出したパレットは自動的にWCAGのコントラストに合格できますか？
自動的にはできません。写真の支配的な色は多くの場合、中程度の輝度を持つ中間調で、お互いに対して2:1〜3:1の範囲の比率を生成する傾向があります。本文テキストの4.5:1しきい値を満たすには、通常、生の抽出が提供するものを超えて背景値を明るくするか、テキスト値を暗くする必要があります。抽出は出発点を与え、コントラストチェックがどれだけの調整が必要かを示します。
WCAGのコントラスト比は色覚異常を考慮していますか？
部分的に考慮しています。WCAGの輝度式は色相ではなく相対的な明るさに基づいているため、4.5:1を満たす高コントラストのペアは、明度差が保たれているため、色覚障害のあるユーザーにとっても一般的に区別可能です。しかし、赤と緑のように同じ明るさの異なる色相を持つ2色は、輝度ベースのコントラストチェックに合格しながら、第2色覚異常の人には区別できない場合があります。色盲シミュレーションを実行することが、コントラスト比とは別に色相レベルの差別化を確認する正しい方法です。