ウェブアクセシビリティに配慮して色を使用する場合、以下の2つが重要となります。 ・色の付け方を工夫する ・色以外でも情報を提供する 次のポストからより具体的に紹介していきます。 #ひとことa11y

コントラスト比を自分で計算するのは大変なので、自動で算出してくれるツールを使用するのがおすすめです。 Google Chromeの拡張機能やFigmaのプラグインなど、ブラウザやデザインツールで使用できるものがさまざまあります。 #ひとことa11y

コントラスト比は1:1から21:1の範囲で表されます。 最小値の1:1は、背景色と文字色が同じでまったく区別がつかない状態です。 最大値の21:1は、文字が黒で背景が白のように最もコントラストが強い状態です。 #ひとことa11y

「1.4.3 コントラスト（最低限）」で出てくる「コントラスト比」とは何なのでしょうか？ ウェブアクセシビリティの文脈で出てくる「コントラスト比」とは、背景色と文字色の相対的な明るさ（相対輝度）の差を数値で表したものを指します。 #ひとことa11y

「ロゴやブランド名の一部である文字」も例外のひとつです。 こういったものはカラーが厳格に決められていて、それを変えてしまうと本質的な意味合いが変わってしまうことがあります。 そのため、コントラスト比の要件は適用されません。 #ひとことa11y

「重要な他の視覚的なコンテンツを含む写真の一部分」は、写真内の文字が重要な情報ではない場合その文字にコントラスト比4.5:1が適用されないということです。 例として、街の風景をメインにした写真に映り込んでいる看板の文字などが挙げられます。 #ひとことa11y

誰もが視覚的に確認できないものも例外のひとつです。 晴眼者や視覚障害者など関係なく、誰にも見えないものは見えないままでよいので、コントラスト比に配慮する必要はありません。 #ひとことa11y

装飾的なテキストの場合コントラスト比の要件は適用されません。 チャコウェブサイトの見出しの場合、「お役立ちブログ」が情報提供のテキストで「BLOG」が装飾とみなされます。 この場合、「お役立ちブログ」はコントラスト比4.5:1が求められますが「BLOG」はそれが求められません。 #ひとことa11y pic.x.com/HbI4YIlov8

ユーザインタフェースコンポーネントとはフォームやリンク、ボタンなどのことで、非アクティブとは使用できない状況ということです。 つまり、条件を満たさないと押せないボタンなどが当てはまります。 操作ができない間は、ボタンのテキストにコントラスト比4.5:1は適用されません。 #ひとことa11y

「付随的なテキストや文字画像」も例外のひとつです。 例えば、 非アクティブなユーザインタフェースコンポーネント 純粋な装飾 誰もが視覚的に確認できないもの 重要な視覚的コンテンツを含む写真の一部分 などが挙げられます。 #ひとことa11y

「大きな文字」とはサイズの大きなテキストや文字画像のことです。 この場合、コントラスト比3:1以上であればよいとされています。 しかし、最近はデバイスの種類が豊富になり表示もさまざまです。 そう考えると、常にコントラスト比4.5:1以上にしておく方が無難だと考えられます。 #ひとことa11y

「1.4.3 コントラスト（最低限）」には、例外とされている場合を除き、テキストや文字画像の背景色と文字色の間に4.5:1以上のコントラスト比が必要だと書かれています。 例外となるのは、「大きな文字」「付随的」「ロゴタイプ」の3つの場合とされています。 #ひとことa11y

「1.4.1 色の使用」は、情報を伝えたり、動作を示したり、ユーザーの反応を促したり、見た目の違いを表したりするのに色を使用する場合、色だけに頼らず他の方法も一緒に使うべきだということが書かれています。 例えば、下線を付ける、太字にするといった感じです。 #ひとことa11y

それでは、ウェブアクセシビリティに配慮した色の使い方にはどのようなことが求められるのでしょうか？ WCAG2.0の色に関わる達成基準の中から、適合レベルA、AAとなっている基準を見ていきましょう。 それは以下の2つです。 1.4.1 色の使用 1.4.3 コントラスト（最低限） #ひとことa11y

ウェブコンテンツを魅力的にする上で、色は欠かせない要素のひとつです。 しかしウェブアクセシビリティに配慮せず配色してしまうと、使いにくいコンテンツになってしまう可能性があります。 デザイン性だけでなく、ウェブアクセシビリティにも配慮した色使いが理想的です。 #ひとことa11y