コントラストを自動的に計算する
ユーザーは色を選択することにより、サイトのデフォルトのデザインを変更できます。この色はメニューの背景色に適用されます。問題は、選択した色に応じてメニューテキストの色を変更する必要があることです（たとえば、ユーザーが濃い緑色を選択した場合、テキストの色は白にする必要があります）。
メニューのテキスト色として白または黒のみを使用したいのですが、白と黒のどちらが最も読みやすくなるかを計算する方法を知りたいです。
更新
ウェブサイトはsoccerteamsを対象としています。サッカーチームは特定の色を持っていることが多いので、チームカラーをサイトに追加するオプションを提供したいと思います。テンプレートではすべての色を提供できないため、テンプレートは機能しません。また、これは物理的な問題（コントラスト）だと思うので、テキストの色を定義するオプションを提供しないことにしました。
W3Cには明示的な Webコンテンツのアクセシビリティに関するガイドライン があり、コントラストも含まれています。色の値を比率と比較して、色の選択肢にアクセスできない/読めない可能性があるかどうかをユーザーに伝えることができます。
テキストとテキストの画像の視覚的表現には、少なくとも4.5：1のコントラスト比があります。
一連のガイドラインには例外といくつかの優れたガイダンスがあることに注意してください。白または黒が最も読みやすいかどうかを確認するほど簡単なことをしている場合は、コントラスト比を比較するのが最も簡単な方法です。黒と白だけがテキストオプションである場合、これが常に理想的な色になるとは限らないことに注意してください。読みやすさはコントラストよりも複雑です。そのため、W3Cガイドラインでは、フォントサイズやその他の考慮事項について説明しています。
テキストのコントラストをテストする を実行できる優れたツールを次に示します。カラーアクセシビリティで何がチェックされるかを理解し、ユーザーにそのようなディスプレイを提供することを検討できます。選択した背景にテキストを表示し、テキストが読みやすさのしきい値を大幅に下回った場合に警告メッセージを表示することを検討してください。
単純な解決策は、色の数値を見て、それを超えると黒になり、それを下回ると白になるしきい値を決定することです。
例（すべての数値を 16進数 で指定）：
ボタンの色が＃4E5523の場合は、各色コンポーネントを追加して全体的な値を取得します。この場合、＃4E +＃55 +＃23 =＃C6になります。しきい値が純粋な黒（＃000000）と白（＃FFFFFF）の中間点に設定されている場合、 ＃17Eで＃C6は低いので、白を使用します。
ボタンの色が＃70CCD1の場合、追加された各カラーコンポーネントの値は＃20Dとなり、しきい値を超えます＃17Eなので、黒を使用する必要があります。
これは非常に単純な方法ですが、機能します。
できないと思います。
すべてのコンピューター、すべてのコンピューター画面、およびすべてのユーザーは、独自の色の解釈を持っています。したがって、背景色と前景色の特定の組み合わせは、1つの画面では見栄えがよく、別の画面ではひどい場合があります。または、ある人にとっては見栄えが良いが、別のユーザーにとってはひどい場合があります。
ユーザーが任意の色を自由に選択できるようにすると、一部のユーザーは気にしないので、ユーザーが知らないうちに目が疲れる背景と前景の組み合わせになってしまいます。
UXの観点から、ユーザーが事前定義された「テーマ」の選択（つまり、背景と前景の組み合わせ）を選択できるようにした方がよいでしょうか？これらのテーマが読みやすさを考慮して設計されていることを確認できます。
最近、 ウェブサイトのリンクとボタンのコントラストを自動的にチェックするツールを作成しました 。
私が異なると非常に便利だと思ういくつかの便利なものがあります：
- テキスト以外のコントラスト（ボタンの背景と隣接する色のコントラスト）を計算します->最小3：1
- ：hoverと：focusの状態も考慮に入れます。
私はいくつかの良い事前定義されたテーマを持つソリューションが好きです。ユーザーは、1つまたは複数の明るいテーマと暗いテーマから適切なテーマを選択できます。一般的な質問は、色の柔軟なカスタマイズがどれほど重要であるかです。
無限に調整可能な背景色を変更するテクニックは、例えば、実装されています。アドビアフターエフェクト。テキストの色は、最適なコントラスト色（黒または白）に自動的に変わります。 IMOは、適切な暗くて明るいテーマで十分です。