「Adobe Color」のアクセシビリティとは、大きく2つの視座に分かれます。1つはWCAG/ Web Content Accessibility Guidelinesアクセシビリティ基準のコントラスト比、もう一つが色覚多様性への対応です。

図1の①「アクセシビリティツール」を選ぶと、初期画面は⑦の「コントラストチェッカー」ツールの操作画面となります。ここで「多様な色覚対応」ツールに切り替えることもできます。
図1で表示されているネイビーブルーのテキストカラーとピンクの背景色はランダム表示された一例です。

AAとAAAの合格ラインの違いについて説明します。評価視点は「通常のテキスト」「大きなテキスト」「グラフィックコンポーネント」の3つです。
「通常の（大きさの）テキスト」とは、通常の太さのフォントの場合は17pt以下、太字のフォントの場合は13pt以下を指します。合格となるコントラスト比は、AAの場合は4.5：1で、AAAの場合は7：1となります。
図1のコントラスト比は4.2：1ですので、「通常のテキスト」の場合、AAレベルでも、AAAレベルでも不合格となります。
「大きなテキスト」とは、通常の太さのフォントの場合は18pt以上、太字のフォントの場合は14pt以上を指しています。合格となるコントラスト比は、AAの場合は3：1で、AAAの場合は4.5：1となります。
コントラスト比は4.2：1ですので、AA合格値3：1以上、AAA合格値4.5：1未満です。そのため「大きなテキスト」の場合の判定は、AAレベルでは合格、AAAレベルでは不合格となります。
「グラフィックコンポーネント」は「大きなテキスト」と同じ基準になっています。
不合格の場合、図1の⑤に見られるように、アプリが提案してくれる「コントラストの提案」機能を使うと便利です。事例ではコントラスト比が、6.0：1の案と7.0：1の案が提示されています。
「通常のテキスト」のAAAレベルの適格コントラスト比は、7：1ですので、アプリ提案の下の配色を「適用」すると、図3のようにAAAレベルでも、すべてのプレビューが「合格」になります。

また、図1の⑤「コントラストの提案」の下には「コントラスト比を設定」という機能があります。仮に「8」を入力して、適用すると図4のような配色を作ることもできます。

図1の⑥は、配色例の「戻る」と「進む」のアイコンです。試行錯誤した配色案を切り替えて比較することができます。ブラウザーの「タブを複製」機能を活用して、2つのブラウザーを並べて同時に見比べる方法も一手です。

◆ 画像で確認するコントラスト比

つぎに図5の①「カラーの読み込み」機能を活用したコントラスト比の確認方法を解説します。

図6が「カラーの読み込み」の初期画面です。コントラスト比を確認するための画像ファイルは、画面にドラッグ＆ドロップする方法でも、PC内から選択する方法でも取り込むことができます。

図7は、当社HPのトップ画面画像を取り込んだ初期画面です。初期画面ではブルーのテキストカラーとキャメルの背景色が選ばれていますので、ピックアップされた場所を「カラーとデザインで暮らしにイノベーションを」というコピー部分に変更した評価結果が図8です。
色のピックアップ箇所は丸い色画像をドラッグして変更します。

図8の画面で「カラーの読み込み」をクリックするとコントラスト比が評価されます。その結果が図9です。しかし文字画像は細い線であることが想定されますので、テキスト画像の色を選びにくさは否めません。そのため、図10のようにコントラスト比を評価したい部分のみの画像を用意して読み込む方法が良いと思います。

◆ 「多様な色覚対応」の評価方法

色覚多様性への対応を考慮する必要がある場面の一つに、色で種別分類された商品を見分けることが考えられます。ここでは鮮やかな赤（R230/G0/B0）を基準色として、カラーホイールの色相を4等分した「正方形」カラーハーモニーを事例に、「多様な色覚対応」ツールの基本的な使い方を説明します。
図11はAdobe Color の初期画面①「カラーホイール」で、②鮮やかな赤（R230/G0/B0）を基準色として設定して、③カラーハーモニーで「正方形」を選んだ画面です。「カラーホイール」の初期設定で6色が表示されていますが、この事例では色数の増減をせずにそのまま進めます。④「アクセシビリティを確認」をクリックすると、「アクセシビリティツール」の「多様な色覚対応とは」に移ります。その画面が図12です。
この導線は、「カラーホイール」で配色を検討し、その案の「多様な色覚対応」を確認するといった基本的な一連の流れになります。
なお、鮮やかな赤を基準色に設定するには▲が表示された基準色内に3つ表示されたアイコンの左端「色を変更」を押して、色彩値スライダーを表示させて入力します。
「カラーホイール」の詳しい使い方は、本コンテンツ【前編】をご覧ください。

◆ 「コンフリクトガイド」を使った多様な色覚対応方法

Adobe Colorでは、カラーホイール内の見分けにくさのある色を結んでいる太い線を「コンフリクトライン（混同色線）」と呼びますが、図13のように、見分けにくさのある丸い色をクリックすると、「コンフリクトガイド」が表れ、そのまま丸い色をドラッグさせて、②③の表示が切り替わる部分を見つけて見分けにくさを解消する位置を探すことができます。
ただし図13を見ても分かるように、コンフリクトガイド上に他の色が位置していても明るさに差があれば見分けにくさが解消されることもありますので、コンフリクトガイドを絶対視することはできません。
通常「多様な色覚対応」を検討する場合、できれば、「カラーホイール」で作ったカラーパレットの色みをあまり変えずに、見分けにくさを解消したいと考えると思います。「コンフリクトガイド」を使って手探りで見分けにくさを解消できても、大幅に元の色が変わり、カラーパレットの印象が当初の意図と異なるものになるのは避けたいところです。
最小限で、どのように色を調整すれば見分けにくさを解消できるかは、ユニバーサルカラーに関する専門知識が必要とされます。先に3つの色覚の特徴について触れましたが、この機会に1から学んでみることもスキルアップにつながると思います。当社では法人向けにそうした講座やワークショップを行っていますので、お気軽にご相談ください。

◆ 「色彩値」を使った多様な色覚への対応方法

色覚多様性に関する知識がない方にお勧めなのが、RGBやHSBといったカラー空間の色彩値を変更して、多様な色覚への対応を図る方法です。
色弱の人は、一部の色相の違いを見分けにくいという特徴がありますが、明度の違いに関しては一般色覚の人と大きな差はありません。そのため、RGBやHSBで明るさの値を変更することで、色を見分けやすくすることができます。
「多様な色覚対応」ツールでは、図14のようにカラーパレットの各色（スウォッチ）をマウスオーバーすると「色を変更」のアイコンが表示されます。それをクリックすると、各色の下に色彩値で色を変更するスライダーが表れます。
図13を見ると分かるように、RGBのスライダーには、R値、G値、B値の下に、照明のアイコンの明度スライダーが付加されています。この明度スライダーによって色相を変えずに明るさを変えることができます。

今回の事例では、黄みの橙の明度を「90」から「93」に微増することで、Adobe Colorのコンフリクトラインを解消することができました（図15参照）。
どのくらい明度を変えることでコンフリクトが解消されるかはケースバイケースですが、専門知識がない方はコンフリクトガイドを手動で動かして試行錯誤をするよりもシンプルな方法でコンフリクトを解消できると思います。

ビジネスカラーコラム「カラーパレットジェネレーター『Adobe Color』をつかいこなす」は、3部構成で「Adobe Color」の基本的な使い方を説明しました。前編の「カラーテーマを作成」では、カラーハーモニー理論を基にした配色パレットづくり、中編の「テーマとグラデーションを抽出」では、イメージ画像を活用した配色パレットやグラデーションパレットづくり、後編の「アクセシビリティツール」では、テキストカラーと背景色に関するWCAGのコントラスト比チェックと解決法、多様な色覚対応チェックと解決法について解説しました。
ツールの活用だけでクリエイティビティを向上させられるわけではありません。前編のまとめでも「RGB再現を前提とした色彩調和に関しては今が萌芽期」と述べました。今日では生成AIツールで様々なデザインが半自動的にアウトプットできるようになりましたが、自動化技術の進歩によって、自分自身での探求がおざなりになってはいけないと考えます。
色彩に関する知見を高めながら、Adobe Colorツールをつかいこなして、カラーデザインのスキルアップを目指してください。