HDR 테스트

이 도구가 유용했나요? 댓글을 남기거나 팁을 공유하거나 개선할 점을 알려주세요.

이 도구의 기능

이 도구는 브라우저에서 바로 브라우저와 운영체제가 디스플레이의 HDR 및 광색역 기능에 대해 보고하는 내용을 확인하고, 표준 sRGB 색상과 Display P3 색상 간의 실제 나란한 시각적 비교를 보여주어 실제 색역 차이를 직접 확인할 수 있게 합니다.

작동 방식

최신 브라우저는 두 가지 관련 CSS 미디어 기능을 노출합니다: dynamic-range는 OS가 활성 디스플레이와 연결이 HDR을 지원한다고 보고할 때 "high"가 되고, color-gamut은 디스플레이가 재현할 수 있는 가장 넓은 색 공간을 보고합니다(srgb, p3, 또는 rec2020, 각각 이전보다 넓으며, 더 넓은 색역은 항상 더 좁은 쿼리와도 일치합니다). 이 도구는 window.matchMedia()로 각각을 확인하고 가장 넓은 일치 항목을 보고하며, 브라우저가 쿼리를 전혀 지원하지 않으면 "감지 불가"로 대체합니다. 비교 패치는 두 번 그려지는데, 한 번은 일반 sRGB로, 한 번은 CSS color(display-p3 ...) 함수를 사용해 그려집니다. 따라서 브라우저와 디스플레이가 정말로 더 넓은 색역을 지원한다면, Display P3 패치는 sRGB로 표현할 수 없는 색상을 사용해 렌더링되며, 주장된 기능을 그냥 믿는 대신 직접 확인할 수 있습니다.

해결하는 문제

• HDR 모드가 현재 디스플레이와 연결에서 실제로 활성화되어 감지되고 있는지 확인하기.
• 브라우저와 디스플레이 조합이 Display P3 또는 Rec.2020 광색역을 지원하는지 확인하기.
• 단순히 주장된 사양이 아니라 sRGB와 Display P3 색상 간의 진짜 시각적 차이를 확인하기.
• 브라우저가 실제로 무엇을 볼 수 있는지 확인하여 HDR 콘텐츠가 올바르게 표시되지 않는 이유를 문제 해결하기.

자주 묻는 질문