코드 한 줄로 기본 제공되는 HTML 양식 입력에 브랜드 색상을 적용합니다.
오늘날의 HTML 양식 요소는 맞춤설정하기가 어렵습니다. 마치 맞춤 스타일을 거의 또는 전혀 선택하지 않거나 입력 스타일을 재설정하여 처음부터 빌드하는 것처럼 느껴집니다. 처음부터 빌드하려면 예상보다 훨씬 많은 작업이 필요합니다. 또한 요소 상태의 스타일이 누락될 수 있고(indeterminate, 지금 보고 있습니다.), 기본 제공 접근성 기능이 손실될 수 있습니다. 브라우저가 제공하는 기능을 완전히 재현하려면 생각한 것보다 더 많은 작업이 필요할 수 있습니다.
accent-color: hotpink;
CSS UI 사양의 CSS accent-color를 사용하면 CSS 한 줄로 요소의 색조를 조정할 수 있습니다. 이렇게 하면 브랜드를 요소로 가져오는 방법을 제공하여 맞춤설정이 필요하지 않게 됩니다.
accent-color 속성은 color-scheme와도 호환되므로 작성자가 밝은 요소와 어두운 요소에 모두 색조를 적용할 수 있습니다.
다음 예에서는 사용자에게 어두운 테마가 활성 상태이고, 페이지는 color-scheme: light dark를 사용하며, 어두운 테마의 핫핑크 색조 컨트롤에 동일한 accent-color: hotpink를 사용합니다.
지원되는 요소
현재는 checkbox, Radio, range, progress라는 4가지 요소만 accent-color 속성을 통해 색조를 조정합니다. 각 색상은 https://accent-color.glitch.me에서 밝은 색과 어두운 색 구성표로 미리 볼 수 있습니다.
체크박스
라디오
범위
진행률
대비 보장
기존에 액세스할 수 없는 요소를 방지하려면 accent-color가 있는 브라우저가 맞춤 강조와 함께 사용할 요건에 부합하는 대비 색상을 결정해야 합니다. 아래 스크린샷은 Chrome 94 (왼쪽)와 Firefox 92 Nightly (오른쪽)의 알고리즘이 어떻게 다른지 보여주는 스크린샷입니다.
여기에서 탈피해야 할 가장 중요한 것은 브라우저를 신뢰하는 것입니다. 브랜드 색상을 제공하고 내 비즈니스가 현명한 결정을 내릴 것이라고 믿습니다.
추가: 색조 추가
이 네 가지 양식 요소보다 더 많은 색조를 조정하는 방법이 궁금하실 것입니다. 다음은 색조가 적용되는 최소한의 샌드박스입니다.
- 초점 링
- 텍스트 선택 강조표시
- 마커 나열
- 화살표 표시기 (Webkit만 해당)
- 스크롤바 thumb (Firefox 전용)
html {
--brand: hotpink;
scrollbar-color: hotpink Canvas;
}
:root { accent-color: var(--brand); }
:focus-visible { outline-color: var(--brand); }
::selection { background-color: var(--brand); }
::marker { color: var(--brand); }
:is(
::-webkit-calendar-picker-indicator,
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-outer-spin-button
) {
color: var(--brand);
}
잠재적인 미래
사양은 accent-color의 적용을 이 도움말에 표시된 네 가지 요소로 제한하지 않으므로 나중에 더 많은 지원이 추가될 수 있습니다. <select>에서 선택된 <option>와 같은 요소는 accent-color로 강조 표시할 수 있습니다.
그 밖에 웹에서 색조를 조정하는 데 사용하고 싶은 것이 있나요? 선택기로 @argyleink를 트윗하면 이 문서에 추가될 수 있습니다.