web-dev-qa-db-ja.com

コントラストと色のテストの妥当性は何ですか？

私はちょうど私たちの企業サイト（ www.dotblue.net ;あなたが気にするなら）でコントラストと色のテスト（この場合は checkmycolours.com を使用）を実行しました、そしてそれはかなり報告しますいくつかの失敗。ただし、私は設計段階で複数の画面での読みやすさを明確に最適化し、リストされている多くの失敗に同意しません。

私の質問：これらのテストの科学的背景は何ですか？これらの結果を心配して、ウェブサイトのコントラストを変更する必要がありますか？

accessibilitycolorreadabilitycolor-schemecontrast
6
vincent.io

CheckMyColours.comは、Webコンテンツアクセシビリティガイドライン（WCAG 2.0）コントラストテストを使用しています。

テストの妥当性は、checkmycolours.comではなくWCAGで提起するものです。

WCAGがコントラスト比の標準をサポートする研究を提供していることは知りません。ただし、これらの標準についての私の経験は、かなり緩いということです。 （少なくとも私にとっては）読みにくい標準を満たす色のペアを見たことがあります。

テストの1つは 明度コントラスト比の式です

これらの計算が行われるJavaScriptファイルを表示することにより、checkmycoloursがこのテストの計算をどのように実行するかを確認できます。

  • Chromeの開発ツールを開きます。
    • 「ソース」タブをクリックします。
    • Jsフォルダーを開きます。
    • Ccheck_min.jsファイルを開きます。

      私は数分かけて彼らのコードを調べました。 WCAG 2.0の相対輝度の公式には、認識できる部分があります。たとえば、これをファイルで検索します

      if（r <=。03928）{o = r/12.92} else {o = Math.pow（（r + .055）/1.055,2.4）}

      そして、あなたは彼らのコントラスト計算の真っ只中にいるでしょう。

      結果をテストするより簡単な方法は、コントラスト比を自分で計算するか、]（ http://juicystudio.com/services/luminositycontrastratio.php ）。

      心配する必要がありますか？あなたがあなたのサイトで描いたもの、書いたもの、チャート化したものなどをすべて見る人々の能力に関心がある場合のみ。 :)

    • 8
    user1757436

    最初の質問はユーザーuser1757436によって回答されました。

    2つ目の質問に何か追加したいと思います。まず第一に、あなたのページはすべて良好であり、うまくデザインされています。第二に、コントラストは間違いなくウェブデザインの非常に重要な要素です。

    Checkmycolours.comのテストの結果について心配する必要がありますか？

    a、checkmycolours.com

    ページに存在しない色の組み合わせについて報告される多くのエラーがあります。

    結果の制限や有効性についての注記なしに、標準（すべてを検討することは不可能）の一部となります。

    b、WACG

    特定の値の計算方法、または「良い」または「悪い」とラベル付けされるものに関して、標準の有用性が制限されていることをご存知だと思います。最も誤解を招くのは、おそらく「色の違い」でしょう。

    したがって、クライアントがWACGへの準拠を具体的に要求した場合にのみ心配します。

    フォントサイズは読みやすさに大きな影響を与えます。フォントサイズが通常よりも大きい（良い）ため、テストの結果は有効ではありません（これも規格に記載されています）。

    今後の作業のために、 このツール を使用して色を確認することをお勧めします。 2つの色の "Lum"差が30％より大きい場合、一般的には問題ありません。本当に確実にしたい場合は、40％に増やしてください。フォントサイズを大きくすると、要件が低くなることに注意してください。欠点は、「標準」ドキュメントを提示できないことです...

    最後に、連絡先フォーム送信ボタンのフォントの色を白に変更します。これは、シアンブルーが背景色である他のすべてのケースで白を使用したためです。

    1
    John