HDRテスト

このツールは役に立ちましたか?コメントを残したり、コツを共有したり、改善方法を教えてください。

このツールの機能

このツールは、ブラウザ内で直接、ブラウザとオペレーティングシステムがディスプレイのHDRと広色域機能について報告する内容を確認し、標準sRGBカラーとDisplay P3カラーの実際の並列視覚比較を示すことで、実際の色域の違いを自分の目で確認できるようにします。

仕組み

最新のブラウザは2つの関連するCSSメディア機能を公開しています。dynamic-rangeは、OSがアクティブなディスプレイと接続がHDRをサポートしていると報告するときに「high」になり、color-gamutは、ディスプレイが再現できる最も広い色空間を報告します(srgb、p3、またはrec2020で、それぞれ前より広く、広い色域は常により狭いクエリにも一致します)。このツールはwindow.matchMedia()でそれぞれをチェックし、最も広い一致を報告し、ブラウザがクエリをまったくサポートしていない場合は「検出不可」にフォールバックします。比較パッチは、通常のsRGBと、CSSのcolor(display-p3 ...)関数を使用したものの2回描画されます。そのため、ブラウザとディスプレイが本当に広い色域をサポートしている場合、Display P3パッチはsRGBが表現できない色を使用してレンダリングされ、主張された機能を鵜呑みにするのではなく、直接それを見ることができます。

解決できる問題

• HDRモードが現在のディスプレイと接続で実際にアクティブで検出されているかを確認する。
• ブラウザとディスプレイの組み合わせがDisplay P3またはRec.2020の広色域をサポートしているか確認する。
• 主張されたスペックだけでなく、sRGBとDisplay P3の色の間の本物の視覚的な違いを見る。
• ブラウザが実際に何を認識できているかを確認することで、HDRコンテンツが正しく表示されない理由をトラブルシューティングする。

よくある質問