색상과 배경

docs.scrimba.com

버튼을 특정 파란색으로 만들고 싶다면, 디자인 파일에서 색상을 찾아 #1b2130을 스타일시트에 붙여넣으면 작동하지만, 그 문자들이 무엇을 의미하는지나 음영을 조금 더 밝게 조정하는 방법을 알 수 없을 것입니다. CSS의 색상은 그 아래에 있는 몇 가지 체계를 배울 때까지 암호 코드의 더미처럼 보입니다. 색상을 읽고 배경에 칠할 수 있게 되면, 페이지의 대부분의 시각적 특징이 당신의 손에 있게 됩니다.

색상 이름 지정하기

CSS를 사용하면 같은 색상을 여러 가지 방법으로 작성할 수 있습니다. 가장 간단한 방법은 **키워드**입니다. 브라우저가 이미 알고 있는 일반 영어 이름입니다.

.tag {
  color: rebeccapurple;      /* 코드가 필요 없는 명명된 색상 */
}

이러한 이름이 약 140개 있어서 빠른 작업에는 유용하지만 실제 디자인에는 너무 부족합니다. 다른 방법들은 어떤 색상이든 설명할 수 있게 해줍니다. 16진수 코드는 #로 시작하고 6개의 문자가 뒤따르며, rgb()는 빨강, 초록, 파랑을 양으로 혼합합니다. 이들은 모두 정확한 색상을 가리킵니다. 키워드는 일반적인 색상의 지름길입니다.

.tag {
  color: #1b2130;            /* 16진수 코드로 작성된 같은 짙은 해군색 */
}

CSS에서 색상을 작성하는 방법은 4가지가 있으며, 이들은 서로 다른 체계를 통해 같은 색상을 설명합니다. 키워드 같은 rebeccapurple은 고정된 이름입니다. #1b2130 같은 16진수 코드는 빨강, 초록, 파랑을 6개 문자로 압축합니다. rgb() 함수는 0부터 255까지의 숫자로 이 세 채널을 설정합니다. 그리고 hsl()은 색상을 색조, 채도, 밝기로 설명합니다.

.badge {
  color: #1b2130;                 /* 16진수: 빨강, 초록, 파랑 각각 2자 */
  color: rgb(27, 33, 48);         /* 빨강, 초록, 파랑 양으로 표현한 같은 색상 */
  color: hsl(219, 28%, 15%);      /* 색조, 채도, 밝기로 표현한 같은 색상 */
}

이 3줄은 모두 동일한 짙은 해군색을 칠합니다. **hsl()**을 사용하세요. 손으로 색상을 선택할 때, 16진수와 rgb는 주로 복사하여 붙여넣는 숫자이기 때문입니다.

CSS는 색상을 키워드, 16진수 코드, rgb(), 또는 hsl()로 받아들이며, 처음 3개는 모두 다른 표기법을 통해 sRGB 공간(수십 년 동안 화면이 사용해온 표준 색상 공간)을 다룹니다. 16진수 코드는 16진법입니다. #1b2130은 빨강 1b, 초록 21, 파랑 30이며, 각 쌍은 00부터 ff까지의 값입니다(10진수로는 0부터 255까지). rgb()는 이 같은 3개 채널을 평문 10진수로 작성합니다. 둘 다 인간이 추론하기 위해 만들어지지 않았습니다. 색상을 "조금 더 밝게" 움직이려면 명확한 방향 없이 3개의 숫자를 동시에 조정해야 하기 때문입니다.

.badge {
  color: #1b2130;               /* 16진법: 1b 빨강, 21 초록, 30 파랑 */
  color: rgb(27 33 48);         /* 같은 채널, 10진수, 현대의 공간으로 구분된 문법 */
  color: hsl(219 28% 15%);      /* 색조 219도, 28% 채도, 15% 밝기 */
}

hsl() 선호: 세 축이 각각 격리하여 조정할 수 있는 한 가지에 매핑됩니다. 색조는 색상환에서 0부터 360까지의 위치이고, 채도는 색상이 얼마나 생생한지이며, 밝기는 얼마나 밝은지입니다. 호버 상태를 약간 어둡게 원하나요? 밝기를 몇 퍼센트 낮추고 나머지 둘은 그대로 두세요. 그 단일 가독성 축이 사용자 정의 속성으로 팔레트를 빌드할 때 hsl()이 깔끔하게 구성되는 이유입니다. 여기서 한 색조를 유지하고 음영 세트 전체에서 밝기만 변경할 수 있습니다.

Juno색상 이름 지정하기 같은 색상을 rebeccapurple 같은 키워드, #1b2130 같은 16진수 코드, 또는 rgb()로 작성할 수 있습니다. 키워드는 빠르지만 약 140개만 있으므로 대부분의 실제 작업은 코드를 사용합니다. 아직 눈으로 16진수 코드를 읽으려고 하지 마세요. 정확한 값을 복사하는 것은 이 단계에서 완전히 정상입니다.

Juno색상 이름 지정하기 키워드, 16진수, rgb(), 그리고 hsl()은 모두 서로 다른 체계를 통해 같은 색상의 이름을 지정합니다. 색상을 직접 선택할 때는 hsl()을 사용하세요. 색조, 채도, 밝기는 실제로 추론할 수 있기 때문입니다. 16진수와 rgb()는 손으로 조정하기 보다는 디자인에서 복사하는 값들입니다.

Juno색상 이름 지정하기 키워드, 16진수, 그리고 rgb()는 모두 서로 다른 표기법을 통해 sRGB를 다룹니다. hsl()은 같은 색상을 한 번에 움직일 수 있는 3개 축으로 재구성합니다. 그것이 선호하는 전체 이유입니다: 어두운 호버는 3개의 조정된 숫자 대신 한 숫자인 밝기입니다. 사용자 정의 속성에서 팔레트를 빌드하고 음영 크기에서 밝기를 변경할 때 가치를 얻습니다.

투명도

때때로 부분적으로 볼 수 있는 색상을 원해서 그 뒤에 앉은 것이 조금 보이도록 할 수 있습니다. 이것을 **투명도**라고 하며, 알파라는 4번째 값으로 추가합니다. 0은 완전히 투명하고, 1은 완전히 불투명합니다.

.overlay {
  background-color: rgb(27 33 48 / 0.5);   /* 해군색이지만 반투명 */
}

끝의 / 0.5는 "반 불투명"을 의미합니다. 전체 요소를 페이드 처리하는 opacity라는 속성도 있습니다. 텍스트와 모두:

.faded {
  opacity: 0.5;              /* 한 색상이 아닌 전체 요소를 페이드 */
}

차이가 중요합니다: 알파는 그 색상 하나에만 영향을 주지만, opacity는 요소의 모든 것을 페이드 합니다.

색상을 투명하게 만드려면 알파 값을 추가하세요. 0은 보이지 않고 1은 불투명합니다. rgb()과 hsl() 모두 슬래시 뒤에 가져갈 수 있으며, 16진수 코드는 끝에 2개의 추가 문자로 가져갈 수 있습니다.

.overlay {
  background-color: rgb(27 33 48 / 0.5);    /* 반투명 해군색 */
  background-color: hsl(219 28% 15% / 0.5); /* hsl을 통한 같은 것 */
  background-color: #1b213080;              /* 다시 같음: 80은 대략 50% 알파 */
}

알파와 opacity 속성 사이에는 중요한 구분이 있습니다. 알파는 한 색상을 부분적으로 투명하게 만들고 다른 것은 아닙니다. opacity는 전체 요소를 페이드합니다. 텍스트, 테두리, 그리고 모든 자식들을 포함하여 단일 단위로 말입니다. 한 색상을 알파로 페이드하고 전체 요소를 opacity로 페이드합니다. 텍스트가 배경만 부드럽게 하려고 했을 때 희미해지면, opacity에 도달했을 것입니다. 알파가 필요했을 곳에서입니다.

**알파**는 색상에 대한 4번째 채널입니다. 0(완전히 투명)부터 1(완전히 불투명)까지이며, 그 색상 값 하나에 속합니다. 현대 rgb()와 hsl()은 슬래시 뒤에 가져갈 수 있으며, 16진수는 4번째 바이트로 받아들이므로 #1b213080은 80/ff에서 대략 50%에서의 해군색입니다. 알파가 색상에 있으므로, 배경을 반투명하게 만들 수 있으면서 텍스트, 테두리, 그리고 모든 것은 완전히 불투명하게 유지할 수 있습니다.

.overlay {
  background-color: hsl(219 28% 15% / 0.5);  /* 오직 이 채우기만 반투명 */
  color: white;                              /* 텍스트는 완전히 불투명 */
}

opacity는 비슷하게 보이는 다른 도구입니다. 이는 요소 전체의 투명도를 설정하며, 요소와 모든 자손을 페이지에 하나의 그룹으로 합성하여 수행합니다. 두 가지 결과가 따릅니다. 알파가 없습니다. 첫째, opacity가 1 미만이면 새로운 쌓기 문맥(겹치는 요소의 순서를 정하는 독립적인 계층)을 설정합니다. 이는 무엇이 무엇의 위에 있는지 변경할 수 있습니다. 둘째, 페이드는 완성된 그룹에 적용되므로 페이드된 부모 안의 견고한 자식을 복구할 수 없습니다. 한 채우기 또는 한 테두리만 투명하게 하려는 경우 그 색상의 알파를 사용하고 opacity를 혼자 두세요.

Juno투명도 색상에 4번째 값을 추가하여 투명하게 만듭니다. 0은 보이지 않고, 1은 불투명하고, / 0.5 같은 것은 반 정도입니다. 그 알파는 색상 하나에만 영향을 줍니다. 별도의 opacity 속성은 텍스트를 포함하여 전체 요소를 페이드하므로 배경만 부드럽게 하려는 경우 알파를 선택하세요.

Juno투명도 알파는 단일 색상의 투명도이며, rgb() 또는 hsl()에서 슬래시 뒤에 작성되거나 2개의 추가 16진수 문자로 표시됩니다. opacity 속성은 무딘 버전입니다. 전체 요소와 자식들을 한 번에 페이드합니다. 텍스트가 예기치 않게 희미해지면, 알파가 올바른 호출일 때 opacity를 사용했습니다.

Juno투명도 알파는 색상에 있으므로, 반투명 채우기는 견고한 텍스트와 테두리를 건드리지 않습니다. opacity는 전체 요소와 자손을 하나의 그룹으로 합성하므로, 자식은 페이드된 부모 안에서 견고하게 유지될 수 없으며, 새로운 쌓기 문맥을 조용히 시작합니다. 전체 요소가 함께 페이드되기를 실제로 원하지 않으면 알파에 도달하세요.

배경 색상 및 이미지

background-color 속성은 테두리까지 요소의 뒤 영역을 채웁니다. 이름을 지정할 수 있는 모든 색상을 사용할 수 있습니다.

.hero {
  background-color: hsl(219 28% 15%);   /* 콘텐츠 뒤의 견고한 해군색 */
}

background-image를 사용하여 url(...)으로 요소 뒤에 이미지를 넣을 수도 있습니다:

.hero {
  background-image: url("mountains.jpg");
  background-size: cover;               /* 이미지를 확대하여 전체 영역을 채우기 */
}

background-size: cover는 사진을 확대하여 상자를 완전히 채우고 오버플로우를 잘라내므로 빈 공간이 없습니다. 대부분의 경우 원하는 설정입니다.

background-color는 콘텐츠 뒤 영역을 칠하며, 패딩 상자를 테두리의 가장자리까지 채웁니다. 그 색상 위에 background-image와 url(...)을 사용하여 이미지를 겹쳐놓을 수 있습니다. 위에 겹쳐지므로, 배경 색상은 투명 부분을 통해 보이고 이미지가 여전히 로드 중일 때 나타납니다.

.hero {
  background-color: hsl(219 28% 15%);   /* 통과 및 먼저 로드 */
  background-image: url("mountains.jpg");
  background-size: cover;               /* 상자를 채우고 오버플로우를 자르기 */
  background-position: center;          /* 이미지의 중간을 보기에 유지 */
  background-repeat: no-repeat;         /* 하나의 복사본, 타일하지 않기 */
}

3개의 속성이 이미지가 앉는 방식을 제어합니다. background-size는 보통 cover(상자를 채우고 넘친 것을 자르기) 또는 contain(전체 이미지를 안에 맞추기, 간격을 남길 수 있음)입니다. background-position은 이미지가 잘렸을 때 어느 부분이 보이는지 결정합니다. center가 안전한 기본값입니다. background-repeat: no-repeat은 작은 이미지가 상자 전체에 타일되는 것을 막습니다.

background-color는 요소의 배경 영역을 채웁니다. 기본적으로 패딩 상자이므로 색상은 패딩의 바깥쪽 가장자리에 도달하고 테두리에서 멈춥니다. background-image는 그 색상 위에 칠하며, 사진 이미지 아래에 견고한 background-color를 유지할 가치가 있습니다. 이미지가 로드되는 동안 또는 요청이 실패한 경우 표시되는 폴백이며, 투명 영역을 통해 보이므로 이미지의 톤에 가까운 것을 선택하면 빈 페이지의 플래시를 피합니다.

.hero {
  background-color: hsl(219 28% 15%);   /* 폴백 및 로드 시간 채우기 */
  background-image: url("mountains.jpg");
  background-size: cover;               /* cover: 상자를 채우고 오버플로우를 자르기 */
  background-position: center;          /* 중앙에 자르기 고정 */
  background-repeat: no-repeat;
}

크기 조정 선택은 실제 거래입니다. cover는 이미지를 두 축 모두에 맞춰 상자를 채우고 넘친 것을 자르므로 아무것도 비어있지 않지만 이미지의 일부가 손실됩니다. contain은 전체 이미지가 맞을 때까지 확대하므로 아무것도 잘리지 않지만 상자에 덮이지 않은 줄무늬가 표시될 수 있습니다(background-color가 이들을 채웁니다). background-position은 cover 아래에서 가장 중요합니다. 잘린 것이 남는 영역을 결정하기 때문입니다. center는 안전하지만 초상화는 얼굴을 틀에 맞추기 위해 top을 원할 수도 있습니다. 깔끔한 비사진 채우기의 경우 그래디언트도 background-image로 간주된다는 점을 주목하세요. 다음 섹션에서이를 사용합니다.

Juno배경 색상 및 이미지background-color는 요소 뒤의 공간을 채우고, background-image: url(...)는 사진을 거기에 넣습니다. background-size: cover를 사용하여 이미지를 쌍으로 만들어 전체 상자를 간격 없이 채웁니다. 그 조합은 초반에 도달할 대부분을 다룹니다.

Juno배경 색상 및 이미지 배경 이미지는 배경 색상 위에 겹쳐지므로 이미지가 로드되는 동안 색상을 유지하세요. cover는 상자를 채우고 오버플로우를 자르고, contain은 전체 이미지를 맞추고 간격을 남길 수 있으며, background-position은 잘렸을 때 어느 부분이 보이는지 결정합니다. no-repeat을 추가하세요. 이미지가 타일되기를 원하지 않으면 말입니다.

Juno배경 색상 및 이미지 사진 아래에 background-color를 유지하세요. 로드 중의 폴백이고 투명 영역을 통해 보입니다. cover 대 contain은 채우기-그리고-자르기 대 맞추기-그리고-아마도-간격이며, background-position은 cover 아래에서만 자신을 벌 수 있습니다. 여기서 자르지 않고 생존할 것을 선택합니다. 기본적으로 center에 고정하고 특정 이미지 부분이 틀에 있어야 할 때만 이동하세요.

그래디언트

**그래디언트**는 한 색상에서 다른 색상으로의 부드러운 혼합입니다. CSS는 이를 일종의 이미지로 취급하므로 background-color가 아닌 background-image에 들어갑니다.

.banner {
  background-image: linear-gradient(hsl(219 28% 15%), hsl(219 40% 35%));
}

이는 맨 위의 첫 번째 색상에서 아래쪽의 두 번째 색상으로 혼합됩니다. 2개 이상의 색상을 나열할 수 있으며 방향을 변경할 수 있습니다:

.banner {
  background-image: linear-gradient(to right, hsl(340 80% 55%), hsl(30 90% 60%));
  /* 위에서 아래 대신 왼쪽에서 오른쪽으로 혼합 */
}

이미지 파일이 필요 없습니다. 브라우저가 혼합을 그립니다.

**그래디언트**는 생성된 이미지이므로 linear-gradient()가 background-color가 아닌 background-image에 들어갑니다. 첫 번째 인수는 방향이고, 그 다음은 혼합할 색상 목록입니다. 방향을 생략하면 위에서 아래로 실행됩니다.

.banner {
  background-image: linear-gradient(
    to right,                    /* 방향: 왼쪽 가장자리에서 오른쪽 가장자리 */
    hsl(340 80% 55%),            /* 시작 색상 */
    hsl(30 90% 60%)              /* 끝 색상 */
  );
}

radial-gradient()는 같은 방식으로 작동하지만 직선을 따라가 아니라 중심점에서 고리로 바깥쪽으로 혼합됩니다. 부드러운 광선 또는 스포트라이트 효과를 위한 도구입니다.

.spotlight {
  background-image: radial-gradient(hsl(0 0% 100%), hsl(219 28% 15%));
  /* 밝은 중앙에서 어두운 가장자리로 페이드 */
}

그래디언트는 배경 이미지이므로 같은 background-image 속성 아래의 실제 이미지 및 다른 그래디언트와 쌓여서 쉼표로 구분됩니다.

그래디언트는 생성된 이미지이므로 background-image에 있으며 url(...)와 같은 크기 조정 및 계층화 규칙을 따릅니다. linear-gradient()는 선택적 방향 먼저(to right 또는 135deg 같은 각도)를 가져갑니다. 그 다음 혼합할 색상 정지 목록이 있습니다. 정지에 명시적 위치를 제공하고 색상이 정확히 어디에 있는지를 제어하며, 이는 두 개의 정지가 같은 지점에서 만날 때 그래디언트를 단단한 줄무늬로 변합니다.

.banner {
  background-image: linear-gradient(
    135deg,                      /* 각도: 0deg는 위, 90deg는 오른쪽 */
    hsl(340 80% 55%) 0%,
    hsl(30 90% 60%) 100%
  );
}

radial-gradient()는 중앙에서 바깥쪽으로 혼합되며 정지 전에 선택적 모양과 크기를 가져갑니다. 둘 다 모든 의미에서 이미지이므로 쉼표로 구분된 background-image 아래에 겹쳐지며, 초기 그래디언트가 나중 것들을 칠하여 반투명 그래디언트가 사진 위에 틴트가 되는 방식입니다:

.hero {
  background-image:
    linear-gradient(hsl(219 28% 15% / 0.6), hsl(219 28% 15% / 0.6)),  /* 위의 어두운 틴트 */
    url("mountains.jpg");                                             /* 아래 사진 */
  background-size: cover;
}

hsl()은 밝기를 직접 노출하므로 같은 색조 사이에 두 정지 그래디언트가 두 밝기 값에서 깔끔한, 제어 가능한 페이드를 제공합니다. 이는 hsl 선택이 16진수를 통해 지불되는 한 곳입니다.

Juno그래디언트 그래디언트는 색상 사이의 부드러운 혼합이며, CSS는 이를 이미지로 간주하므로 background-image에 들어갑니다. linear-gradient()는 직선으로 혼합하며, 기본적으로 위에서 아래로 또는 방향을 변경하려면 to right를 추가합니다. 파일이 필요 없습니다. 브라우저가 혼합을 그립니다.

Juno그래디언트linear-gradient()와 radial-gradient() 모두 생성된 이미지이므로 background-image에 속합니다. 선형은 당신이 목표로 하는 선을 따라 혼합됩니다. 방사형은 중앙에서 고리로 바깥쪽으로 혼합되므로 광선에 좋습니다. 이미지이므로 하나의 쉼표로 구분된 background-image 아래 여러 개를 쌓을 수 있습니다.

Juno그래디언트 그래디언트는 이미지이므로 위치를 취하고 하나의 background-image 아래 겹쳐지며 background-size를 따릅니다. 정확한 페이드 또는 단단한 줄무늬를 위해 색상 정지에 명시적 위치를 제공하고, 두 번째 요소 없이 사진 위에 반투명 그래디언트를 쌓으세요. 같은 색조 사이의 두 정지 hsl() 페이드는 제어하기 가장 깔끔한 종류입니다.

적응하고 읽을 수 있는 색상

유용한 키워드 하나는 currentColor입니다. 요소의 텍스트 색상을 나타내므로 테두리 또는 아이콘이 자동으로 텍스트와 일치할 수 있습니다:

.chip {
  color: hsl(219 28% 15%);
  border: 2px solid currentColor;   /* 테두리가 텍스트 색상과 일치 */
}

나중에 텍스트 색상을 변경하면 테두리는 별도 편집 없이 따릅니다.

명심할 한 가지 더: 텍스트가 배경에서 돋보이는지 확인하세요. 어두운 배경에 어두운 텍스트는 읽기 어렵고, 흰색에 옅은 회색은 눈에 부담을 줍니다. 둘 사이의 밝기에 명확한 차이를 목표로 하세요.

currentColor는 요소 자신의 color 값으로 확인되는 키워드이므로 테두리, 윤곽선, SVG 아이콘이 반복하지 않고 텍스트 색상을 추적할 수 있습니다. 텍스트를 한 번 설정하면 currentColor와 연결된 모든 것이 함께 업데이트됩니다.

.chip {
  color: hsl(219 28% 15%);
  border: 2px solid currentColor;   /* color를 따르고 중복 값 없음 */
}

이와 함께 봐야 할 속성은 **대비**입니다. 텍스트와 배경의 밝기의 차이입니다. 낮은 대비는 읽기 어렵고, 접근성 가이드라인은 본문 텍스트에 대한 최소 비율을 설정합니다. 이것이 hsl()이 다시 제자리에 오는 곳입니다. 밝기가 자체 축이므로, 색조를 유지하고 텍스트와 배경 밝기를 충분히 멀리 떨어뜨려 한 번에 3개 채널을 추측하지 않고도 읽을 수 있게 유지할 수 있습니다.

currentColor는 요소의 계산된 color로 확인되며, 이는 테두리, 윤곽선, 상자 그림자, SVG fill을 텍스트 색상에 연결하는 가벼운 방법입니다. 모든 값처럼 상속되므로 컨테이너에 color를 설정하면 단일 소스 색상이 currentColor를 참조하는 모든 자손에게 내려가며, 이는 한 선언에서 구성 요소를 테마하기 위한 깔끔한 패턴입니다.

더 어려운 제약은 **대비**입니다. 전경과 배경의 상대 휘도 차이의 측정입니다. 접근성 표준인 WCAG(웹 콘텐츠 접근성 지침)는 일반 본문 텍스트의 경우 최소 4.5 대 1의 비율, 큰 텍스트의 경우 3 대 1을 설정하며, 그 아래의 텍스트는 저시력인 사람뿐만 아니라 많은 사람에게 읽기 어렵습니다. hsl()은 당신이 이를 달성하는 데 도움이 됩니다. 밝기가 별도 축이므로 색조와 채도를 유지하고 두 밝기 값을 먼저 떨어뜨려 쌍이 통과할 때까지 움직일 수 있습니다. 6개 채널을 맹목적으로 밀지 않습니다. 이것은 추론하기 위한 보조일 뿐 보장이 아닙니다. 동일 밝기 색상은 여전히 실제 휘도 계산에 실패할 수 있으므로 확인기를 사용하여 최종 비율을 확인하세요.

이 레벨에서 알 만한 두 가지가 더 있습니다. background 단축형은 많은 배경 속성을 한 번에 설정하며, 유일한 규칙은 background-size가 background-position 뒤에 와서 슬래시로 구분된다는 것입니다: background: url("bg.jpg") center / cover no-repeat. 그리고 CSS는 이제 hsl() 이상의 색상 함수를 가지고 있습니다. oklch() 같은 것들은 더 광범위한 색 영역(화면이 표시할 수 있는 색상 범위)을 지원하는 디스플레이에서 sRGB 외부의 색상에 도달합니다. 아직 필요하지 않지만, 더 새로운 함수가 있다는 것을 알면 디자인 시스템이 sRGB가 표현할 수 있는 것보다 더 생생한 색상에 도달할 때 인식할 수 있습니다. 읽을 수 있는 타이포그래피와 쌍을 이루면 텍스트가 모든 독자에게 의미를 전합니다.

Juno적응하고 읽을 수 있는 색상currentColor는 요소의 텍스트 색상을 복사하는 키워드이므로 테두리가 텍스트와 일치하고 나중에 변경할 때 따릅니다. 그 외에도 텍스트를 읽을 수 있게 유지하세요. 명확히 밝거나 어두운지 뒤에 있는 것보다 확인하세요. 낮은 대비는 페이지를 읽기 어려운 가장 일반적인 이유입니다.

Juno적응하고 읽을 수 있는 색상currentColor는 테두리, 윤곽선, 아이콘을 텍스트 색상에 연결하므로 한 곳에서 설정합니다. 대비, 텍스트와 배경 사이의 밝기 간격을 주시하세요. 접근성 규칙은 본문 텍스트에 대한 최소값을 설정합니다. hsl()에서 밝기 값을 떨어뜨리는 것은 그 간격을 충분히 유지하는 신뢰할 수 있는 방법입니다.

Juno적응하고 읽을 수 있는 색상currentColor는 상속되므로 컨테이너의 한 color이 모든 자손이 이를 참조하도록 테마합니다. WCAG는 본문 텍스트의 경우 4.5 대 1을 원하며, hsl()을 사용하면 밝기만 이동하여 도달할 수 있습니다. 비록 동일 밝기는 실제 휘도 확인에 여전히 실패할 수 있으므로 도구로 확인하세요. background 단축형이 크기를 슬래시로 위치 뒤에 놓는다는 것을 기억하고, oklch() 같은 더 새로운 함수는 더 넓은 색 영역이 필요할 때 존재합니다.