배경색과 글자색 대비 비율 확인 방법

색상 대비를 확인하는 방법

색상 대비 확인 도구는 글자가 놓이는 전경색과 그 뒤의 배경색 조합을 살펴볼 때 사용합니다. 두 색상을 입력하면 대비 비율과 텍스트 크기별 기준 판단을 확인할 수 있습니다. 페이지의 제목, 본문, 설명 문구처럼 서로 다른 색상 조합을 검토할 때 입력값을 조합별로 바꾸어 비교하면 됩니다.

이 도구가 보여 주는 결과는 입력한 두 색상 사이의 대비를 기준으로 정리됩니다. 일반 텍스트와 큰 텍스트는 적용되는 기준이 다르므로 결과에서 두 범주를 나누어 읽어야 합니다. 한 조합의 결과만 보고 페이지 전체의 상태를 판단하기보다는, 실제 화면에서 사용하는 각 전경색과 배경색 조합을 따로 확인하는 방식이 적절합니다.

색상 입력은 선택 사항입니다. 값을 생략하면 전경색에는 검정 #000000, 배경색에는 흰색 #ffffff이 사용됩니다. 따라서 별도의 값을 넣지 않고 기본 조합을 확인할 수도 있고, 검토하려는 조합이 있다면 두 색상을 직접 지정할 수도 있습니다. 입력하기 전에 어떤 색이 글자에 해당하고 어떤 색이 배경에 해당하는지 구분하면 결과를 해석하기가 쉽습니다.

입력부터 결과 확인까지

1. 먼저 확인하려는 조합에서 글자에 사용되는 색을 전경색으로 정합니다. 배경에 사용되는 색은 배경색으로 정합니다. 두 값을 모두 알고 있다면 각각의 입력 영역에 넣고, 기본 조합을 확인하려면 값을 생략할 수 있습니다. 값을 하나만 생략하는 경우에는 생략한 쪽에 해당하는 기본 색상이 적용되므로 두 입력값의 의미를 구분해 확인합니다.

2. 전경색과 배경색에는 지원되는 색상 표기를 사용합니다. 16진수 표기는 #000처럼 세 자리이거나 #ffffff처럼 여섯 자리여야 합니다. RGB 형식은 rgb로 시작하고 쉼표로 구분된 십진수 성분 세 개를 포함해야 합니다. 예를 들어 rgb(51,51,51)처럼 입력할 수 있습니다. 색상 이름이나 임의의 CSS 표기는 지원되는 형식으로 간주하지 말고 사용하지 않는 편이 좋습니다.

3. 입력값의 양쪽 끝에 공백이 있다면 해석 전에 제거됩니다. 입력에 포함된 영문자는 소문자로 정리된 뒤 색상 해석에 사용됩니다. 그래도 입력 형식 자체가 지원 범위를 벗어나면 값을 읽지 못할 수 있으므로, 공백 정리에 기대어 형식을 바꾸지는 마세요. 색상 표기를 확인한 뒤 제출 또는 확인 동작을 실행합니다.

4. 결과에서 먼저 대비 비율을 찾고, 이어서 일반 텍스트와 큰 텍스트에 대한 네 가지 기준별 판단을 확인합니다. 일반 텍스트에는 4.5와 7.0 기준이 적용되고, 큰 텍스트에는 3.0과 4.5 기준이 적용됩니다. 두 색상 중 하나라도 해석되지 않으면 정상적인 대비 판단 대신 오류 표시가 포함된 결과가 반환됩니다. 이 경우 통과나 실패 판단을 읽으려 하지 말고 문제가 된 입력을 지원되는 표기로 고쳐 다시 확인합니다.

5. 여러 조합을 비교할 때는 한 번에 확인한 전경색과 배경색을 기록하고 다음 조합으로 바꿉니다. 색상 값을 바꾼 뒤에는 이전 결과와 새 결과를 섞어 읽지 않도록 현재 입력값을 먼저 확인합니다. 검토 대상이 일반 텍스트인지 큰 텍스트인지도 결과를 읽는 시점에 함께 구분합니다. 이렇게 하면 같은 배경에 여러 글자 색을 적용하는 경우에도 조합별 판단을 나누어 볼 수 있습니다.

결과를 읽는 법

유효한 두 색상을 입력하면 결과의 대비 비율은 소수점 둘째 자리까지 반올림됩니다. 화면에 표시된 반올림 값과 기준별 판단을 함께 확인해야 하며, 비율만 보고 네 판단을 임의로 바꾸어 해석해서는 안 됩니다. 결과에는 일반 텍스트용 4.5 기준과 7.0 기준, 큰 텍스트용 3.0 기준과 4.5 기준에 대한 평가가 각각 포함됩니다.

일반 텍스트와 큰 텍스트를 구분하는 이유는 같은 색상 조합이라도 확인해야 할 기준 범주가 다르기 때문입니다. 본문처럼 일반 텍스트에 해당하는 대상은 일반 텍스트 판단을 우선 살펴보고, 큰 텍스트로 사용하는 대상은 큰 텍스트 판단을 살펴봅니다. 두 범주를 모두 확인해야 하는 상황이라면 네 판단을 각각 읽되, 결과가 제공하는 네 기준의 범위를 넘어 다른 조건까지 평가했다고 해석하지 않습니다.

두 색상이 동일하게 해석되면 대비 비율은 1.0으로 표시됩니다. 입력한 색상이 서로 다르게 보인다고 생각되더라도, 실제로 도구가 해석할 수 있는 표기인지 먼저 확인해야 합니다. 색상을 해석할 수 없는 경우에는 성공적으로 반환된 결과 안에 오류 표시가 포함될 수 있지만, 그 결과를 정상적인 대비 평가 결과로 취급하면 안 됩니다.

이 도구의 판단은 입력한 전경색과 배경색 조합, 표시된 텍스트 범주, 네 가지 대비 기준을 검토하는 데 쓰입니다. 글꼴, 실제 표시 크기, 주변 색상이나 다른 디자인 조건까지 함께 평가한 결과는 아닙니다. 따라서 결과가 특정 기준을 충족하거나 충족하지 않는다는 사실과 디자인을 종합적으로 판단하는 일은 구분해야 합니다. 색상 조합을 수정했다면 수정한 두 값을 다시 입력해 새 결과를 확인합니다.

사용 예시

웹 페이지의 짙은 회색 글자와 흰색 배경 조합을 게시 전에 검토합니다.

전경색에 #333333, 배경색에 #ffffff을 입력한 뒤 확인 동작을 실행하고, 표시된 비율과 네 기준별 판단을 읽습니다.

결과에는 대비 비율이 소수점 둘째 자리까지 표시되고, 일반 텍스트 기준 두 개와 큰 텍스트 기준 두 개의 판단이 각각 나타납니다.

제한 사항

• 네 가지 대비 기준의 판단만 제공하므로 글꼴, 실제 표시 크기, 주변 요소와 같은 디자인의 다른 조건까지 평가한 결과로 해석하지 마세요.

자주 발생하는 오류

• 색상 이름, 지원 범위를 벗어난 CSS 표기, 성분 수가 다른 RGB 표기를 입력하면 색상을 해석하지 못할 수 있습니다. 해당 값을 세 자리 또는 여섯 자리 # 포함 16진수나 쉼표로 구분된 십진수 성분 세 개를 포함하는 rgb 형식으로 바꾼 뒤 다시 확인하세요.

자주 묻는 질문

색상을 입력하지 않아도 되나요?

두 입력값을 생략하면 전경색은 #000000, 배경색은 #ffffff로 처리됩니다. 한쪽 값만 생략하는 경우에도 생략한 쪽에는 해당 기본 색상이 적용됩니다.

어떤 색상 형식을 입력할 수 있나요?

세 자리 또는 여섯 자리 # 포함 16진수와, rgb로 시작하면서 쉼표로 구분된 십진수 성분 세 개를 포함하는 형식을 사용할 수 있습니다. 색상 이름이나 지원 범위를 벗어난 CSS 표기는 해석되지 않을 수 있습니다.

전경색과 배경색이 같으면 어떻게 표시되나요?

두 색상이 동일하게 해석되면 대비 비율은 1.0으로 표시됩니다. 두 색상이 유효하게 해석된 경우에는 비율을 소수점 둘째 자리까지 반올림한 뒤 일반 텍스트와 큰 텍스트의 네 기준을 평가합니다.