WCAGの達成基準 1.4.1 色の使用には、以下のように書かれています。
達成基準 1.4.1 色の使用
(レベル A)色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。
これを元にして、freeeアクセシビリティー・ガイドラインでは、以下のようなチェック項目を設けています。
チェックID：0051
グレイスケール表示でも以下のような事象は発生せず、利用に支障が出ない。
- リンク箇所を判別できる
- 画像、テキストの意図が伝わる
- 入力フォームの必須項目、エラーを認知できる
このチェック項目について、「下線のないリンクがあるけどいいの？」「枠線も背景色もないボタンがあるけどいいの？」と聞かれることがあります。
デザイナーとしては「 スッキリとした格好いい見た目にしたい 」という気持ちで下線や枠線や背景色を消した見た目を提案しているはずです。自分もデザイナーの端くれなので、その気持ちはとてもわかります。
なぜ、色を唯一の視覚的手段にしてはいけないのか
ここに限らず、WCAGのことでわからないことがあったら、まずは解説書（Understanding Docs）を参照しましょう。達成基準1.4.1に対する、WCAG 2.2に対応した日本語訳はまだ公開されていないため、WCAG 2.1解説書を見てみます（各達成基準のページからリンクが張られています）。
意図
この達成基準の意図は、色の違いによって伝えられている情報、言い換えれば、それぞれの色には割り当てられた意味があり、その色を使うことによって伝えている情報に、目の見えるすべての利用者がアクセスできるようにすることである。画像 (又は、その他の非テキスト形式) で色の違いによって情報を伝えている場合、色覚異常の利用者はその色が分からないかもしれない。この場合、色で伝えている情報を他の視覚的な手段で提供することで、色の分からない利用者もその情報を知覚できる。訳注
「色覚異常」という用語は、日本医学会 医学用語辞典「色覚関連用語について」に基づいて使用している。色は、感覚的な訴求力、ユーザビリティ、そしてアクセシビリティを高めるため、ウェブコンテンツのデザインにおいて重要なものである。しかし、色を知覚しづらい利用者もいる。ロービジョンの人は、色覚に限界を感じることがよくあり、年配の利用者の多くも色がよく見えない。さらに、色数が制限されている、又はモノクロのディスプレイ及びブラウザを使用している人は、色だけで提示されている情報を知覚できない。
この達成基準の意図は、色を知覚しづらい状況にある人にも情報が知覚できるようにすることであることがわかります。
ここで主に意識されているのは、色弱（色覚異常）の人、ロービジョンや年配で色を認識しづらい人、そしてモノクロ（グレースケール）で表示される画面を見ている人です。
人間が色を感じるのは網膜にある3種類の錐体細胞であり、その中のどれか（またはすべて）の働きが弱いと、区別のつきづらい色の組み合わせが発生します。赤色と緑色の区別のつきづらいP型・D型色覚の人は、日本では男性の約20人に1人、女性の約500人に1人程度存在すると言われています1。
ブラウザのデフォルトのスタイル（ユーザーエージェントスタイルシート）では、通常のテキストは黒色、リンクは青色で下線が付き、ボタンにはグレーの背景色と黒い枠線がついていることがほとんどです。下線や枠線がつくことにより、たとえ色情報がなくてもリンクやボタンであることがわかるのです。
明度差があればOKなのか？
実は、解説書の注記には、私たちが「色のみで表現している」と思うような場合でも、この達成基準を満たせているとみなせる場合があると書かれています。それは、色合い（色相）ではなく、色の明るさ（明度）の差が大きい場合です。
注記
色相だけでなく明度も大きく異なる色を用いてコンテンツを伝える場合、色間の相対輝度の差が 3:1 のコントラスト比になるのであれば、これは追加の視覚的な区別とみなす。例えば、明るい緑と暗い赤とでは、色（色相）と明度の両方が異なるため、コントラスト比が 3:1 以上あれば合格となる。同様に、要素の前景色と背景色を反転させてコンテンツを区別させる場合も（繰り返すが、前景色と背景色が十分なコントラストを持っているのであれば）合格となる。しかしながら、コンテンツが特定の色を正確に知覚又は区別できる利用者の能力に依存している場合、色間のコントラスト比に関わらず、追加の視覚的な標識が必要となる。例えば、輪郭線が緑なら有効、赤なら無効とわかるようになっているような場合である。
つまり、リンクやボタンを通常のテキストと区別できるようにする場合、通常のテキストと3:1以上のコントラスト比がある色が選ばれているのなら、この達成基準を満たしているといえるのかもしれません。
WCAG 2.1 達成方法集のG183: 色が単独でリンク又はコントロールを特定する場所で、周囲のテキストと一緒に 3:1 のコントラスト比を使用し、そのリンク又はコントロールのフォーカスに追加の視覚的な手がかりを提供するには、これの例としてLinks with a 3:1 contrast ratio with surrounding text があります。
以下はこのページに置かれているサンプルのスクリーンショットです。
このスクリーンショットではリンクには下線がありませんが、リンクの色は明るい青色（#3333FF）が選ばれていて、通常のテキストの色（#000000）とは3.05:1のコントラスト比があります。私の目には、リンクの部分がかなり目立つように見えます。
達成方法集では、このようなリンクで達成基準1.4.1を満たすには3:1以上のコントラスト比のある色に加えて、マウスオーバーやフォーカス時にアンダーラインやフォントの変更などの視覚的な手がかりが登場することを求めています。おそらく、色の違いが判別できてもその色の違いの意図まではわからない前提で、そこでマウスオーバーやフォーカスによりリンクであることを確認するという位置付けなのだと思います。WCAGの達成基準を試験するときは、これを根拠に下線のないリンクであっても適合として良いのかもしれません。
しかし、同じように通常のテキストの色とのコントラスト比3:1を満たす色をリンクに使用していても、彩度の低い色では、リンクがかなり埋没してしまいます。
再び、以下は同じページにある3つめのサンプルのスクリーンショットです。
このスクリーンショットでは、リンクの色はグレー（#5A5A5A）になっています。文字のサイズが小さいからかもしれませんが、上のサンプルよりもリンクが目立たず、パッと見たときにどこにリンクがあるのかわからなくなってしまっています。上の鮮かな青を使ったサンプルも、グレイスケールになると同じような見え方になります。
さらに、マウスオーバーやフォーカスは、マウスもキーボードも接続していないスマートフォン等ではできない操作です。つまりその状況では、リンクで下線が消されていると、そこがリンクであることを確かめることはできません。通常のテキストと3:1以上のコントラスト比のある色を選び、マウスオーバーやフォーカス時に表示を変化させるだけではまだ足りないと私は思います。
下線や枠線は絶対に必要なのか
では、絶対にリンクやボタンの下線や枠線を消してはいけないのかというと、そういうわけでもないはずです。
Material DesignのコンポーネントにあるButtonsには、Text Buttonsが、優先度の低いアクションのために用意されています。このボタンには枠線も下線もありません。
私の目では、これらの例はちゃんとボタンに見えるか、すくなくとも通常のテキストとは違う意味を持つことが読み取れます。もちろんこれは全員がそうというわけではないと思いますが、そこはMaterial Designなので、それなりにわかりやすいのではと思います。どうでしょうか。
これらの例では、他のテキストとの明度差があるだけでなく、周囲のテキストとのあいだに余白が大きく取られています。それによって、単なるテキストではなく、ボタンとしての意味を持つことが読みとりやすくなっています。スクリーンショットからは読み取れませんが、マウスオーバーやフォーカス時にも見た目が変化するようになっています。
また、スナックバーやダイアログのボタンの例は、一般的なUIの慣習に沿っていて、ボタンがありそうな場所にボタンが配置されていることも、ボタンに見える要因になっていそうです。
余白や配置には絶対的な基準があるわけではなく、どんなWebサイトやアプリケーションでも使えるような、どれくらい離れていればOKとか、どの場所ならOKみたいな基準は作りにくいものです。今回例にあげたMaterial Designの例も、「私にはボタンに見える」というだけであって、実際にユーザーに使ってもらったら使い方がわからなくなってしまったということも考えられます。Webサイトやアプリケーションで、下線のないリンクや枠線も背景色もないボタンを配置する際は、使える場所や使い方を限定するなど、慎重に検討をしていく必要があるはずです。