1つの段落でコントラストを考慮する場所がたくさんあります

デザインの色を選択することを考えているとき、私たちは常にアクセシビリティについて考えています。色が触れるときはいつでも、コントラストがあり、テキストの色のコントラストについて話している場合、読みやすくするのに十分な高さである必要があります。これは、さまざまな視覚障害を持つ人々に利益をもたらしますが、誰もが簡単に読みやすいテキストを高く評価しています。

単一の段落の色のコントラストの考慮事項を見てみましょう！

段落のリンクは、おそらく別の色で設定されて、リンクとして区別します。

リンクなどのフォーカス可能な要素には、フォーカススタイルも必要です。デフォルトでは、おそらくファジーブルーのアウトラインが得られるので、十分な色のコントラストがあることを確認する必要があります。また、カスタマイズすると、そのカスタマイズにも優れた色のコントラストが必要です。

また、マウスユーザー向けのホバー状態も必要です。ここでは、テキストの約半分をカバーする背景効果を使用します。あなたがそのようなことをするとき、効果はホバーで目立つほど強力である必要があり、コントラストは両方のバックグラウンドで動作する必要があります。

それは超一般的ではありませんが、スタイル：リンクも訪問できます。スタイリングはやや制限されています（たとえば、セキュリティの懸念であるため、不透明度や背景を変更することはできません）が、色を変えることができます。それを行う場合、適切なコントラストも必要です。おそらく、色の違いを色で引き離すことができます。リンクを多少強調しないようにしますが、それでもそれを示します。

考慮すべきもう1つのことは、人々がテキストを強調することです。私のマシンでは、デフォルトでオレンジ色の色でハイライトするようにセットアップしています（通常はmacosの水色です）。

うまくいけば、リンクの色は、ユーザーが持つ可能性のあるハイライトカラーの選択の下で保持されます。彼らは非常に軽い色合いになる傾向があります。

:: selection {background：purple ; }。あなたがそれをした場合、あなたはあなたが十分なコントラストを得ることを確認するためにあなたのすべての色をもう一度チェックする必要があります。

色と背景の両方を変えることで、自分の手に対策を講じることができます。

ただし、テキスト内のリンクはここでそのコントラストの一部を失っていることに注意してください。 ::選択に新しい色を設定し、テキスト内に独自の色を持つ他のすべての要素を設定することで、ウサギの穴を下り続けることができます。

カスタムハイライト色を実行する場合は、適切な経験則は非常に軽くなり、選択したテキスト専用のカスタマイズを行わないことです。

この投稿のアイデアは、テキストを強調表示してからリンクに焦点を当てるときに、このサイトでリンクを読むのが難しいと報告している人々から得たいくつかのバグレポートから来ました。私はもっ​​と手の込んでそれを修正しようとしましたが、あなたができることには制限があります。

 ::選択a：フォーカス{ / * nope * /}
A：フォーカス::選択{ / * nope * /}
a ::選択：フォーカス{ / * nope * /}

それは、それ以上のことをすることでよりよく処理されます。

私は最近、Ethan MullerのDesigning for Design Systems Postを読みました。たとえば、青いリンクの色は、デザインシステムの色のいくつかでうまく機能する場合がありますが、他のものではそれほどではありません。

これに役立つかもしれないものがいくつかあります。

• 「背景色を宣言するたびに、色を宣言するたびに」という一般的なアドバイスが役立つかもしれません。
• Light Lightのような親レベルのクラスを使用して、明るい色のコンテナ内で広く物事の色を変更しました。
• SASS Mixinを使用して、リンクとリンク状態を簡単に変更できるようにするため、背景を変更するときにやりたいと考えています。

 @mixin linkstyletext（$ linkcolor）{
  {
    // $ linkcolorでジェネリックリンクスタイルを更新します
    ＆：ホバー、
    ＆：集中 {
      //また、プログラムで$ linkcolorを変更することにより、ホバー/フォーカススタイルも変更します
    }
  }
}

.Variation {
   背景：$ somenewbgcolor;
   linkstyletext（$ somenewlinkcolor）
}

まあ、私と一緒にこの旅に来てくれてありがとう。色のコントラストは、背景に単一のリンク色をチェックして、それが通過することを確認するほど簡単ではないことがわかりました。体のコピーで着色するものの数に応じて、チェックすべきことが数十以上あるかもしれません。

これらのスクリーンショットのフォントはIbarra Real Novaで、最近Google Fontsでリリースされました。

以上が1つの段落でコントラストを考慮する場所がたくさんありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。