contrast 색상 대비 검사기 (WCAG)Color Contrast Checker (WCAG)
전경색과 배경색의 대비 비율을 계산하여 WCAG 2.1 접근성 기준을 충족하는지 확인하세요.Calculate the contrast ratio between foreground and background colors to check WCAG 2.1 accessibility compliance.
WCAG 2.1 기준WCAG 2.1 Standards
- AA 일반 텍스트: 4.5:1 이상AA normal text: at least 4.5:1
- AA 큰 텍스트(18pt 이상): 3:1 이상AA large text (18pt+): at least 3:1
- AAA 일반 텍스트: 7:1 이상AAA normal text: at least 7:1
- AAA 큰 텍스트: 4.5:1 이상AAA large text: at least 4.5:1
자주 묻는 질문Frequently Asked Questions
색상 대비 검사 (WCAG) 사용 가이드Contrast Checker Guide
색상 대비 검사 (WCAG)입니다. WCAG 접근성 대비 검사 같은 기능을 제공하며, 입력한 값은 서버로 전송되지 않고 내 기기 안에서만 처리됩니다.WCAG accessibility check. Open the page, fill in the fields described below, and read the result straight away; your input never leaves the device.
계정을 만들 필요가 없어 몇 초면 바로 결과를 받을 수 있습니다.Nothing you enter is stored on a server.
전경 (텍스트) 값을 넣으면 계산이 바로 이루어지고, 결과가 갱신될 때마다 서버 요청이 발생하지 않습니다. 배경 값을 여러 번 바꿔 봐도 같은 방식으로 빠르게 반응합니다.Put in Foreground (Text) and the calculation runs straight away; every time the result refreshes there is no server request behind it. Change Background as often as you like and the response stays just as fast.
사용법How to use it
- 상단 입력칸에 전경 (텍스트) 값을 입력합니다.Enter the Foreground (Text) value in the field at the top.
- 배경 값을 함께 입력합니다.Enter Background as well.
- 결과는 입력이 바뀌는 즉시 갱신됩니다. 값을 조정해 가며 원하는 결과를 확인하세요.The result refreshes as soon as a value changes - adjust the inputs until it looks right.
이럴 때 유용합니다When this tool helps
- 서버 없이 로컬에서만 데이터를 다뤄야 할 때Handling data locally when you do not want a server involved.
- 결과를 화면 캡처로 동료에게 바로 공유할 때Sharing the outcome with a teammate as a screenshot.
- 개발 중 자주 반복하는 변환·검증 작업을 빠르게 처리할 때Speeding up the conversion and validation checks you repeat while coding.
- 전경 (텍스트) 값만 바꿔도 결과가 달라지는 경우를 비교할 때.Comparing what changes when only Foreground (Text) moves.
결과 사용 시 주의점Accuracy note
생성된 결과는 실제 서버나 저장소에 적용하기 전에 반드시 검증하세요. 프로덕션 환경에 그대로 붙여넣지 않는 것을 권장합니다.Validate generated output before it reaches a server or store. Do not paste it into production without checking.
자주 묻는 질문Frequently asked questions
결과는 어디에 저장되나요?Where is the result stored?
색상 대비 검사 (WCAG)의 결과는 화면에만 표시됩니다. 탭을 새로고침하면 입력한 값도 함께 초기화되며, 기록이 필요하면 결과를 복사해 문서나 메모에 남기세요.The result only appears on screen. Refreshing the tab clears your input too, so copy the result into a document if you need a record.
이 도구와 WCAG 대비 검사기의 차이는 무엇인가요?How is this different from WCAG Contrast Checker?
두 도구의 초점이 다릅니다. 하나는 두 색상 대비비·접근성 판정 작업용이고, 다른 하나는 WCAG 접근성 대비 검사 작업용입니다. 두 도구를 함께 열어 두면 작업 흐름이 끊기지 않습니다.They focus on different jobs: one is for Check WCAG AA/AAA compliance, the other for WCAG accessibility check. Keep both open and your workflow will not break stride.
결과를 그대로 써도 되나요?Can I use the result as it is?
생성된 결과는 실제 서버나 저장소에 적용하기 전에 반드시 검증하세요. 프로덕션 환경에 그대로 붙여넣지 않는 것을 권장합니다.Validate generated output before it reaches a server or store. Do not paste it into production without checking.
비슷한 도구는 어떻게 찾나요?How do I find similar tools?
홈 화면 검색창에 도구 이름을 입력하면 바로 나옵니다. 또는 홈의 개발자 도구 카테고리에서 WCAG 대비 검사기, CSS 색상 이름표, CSS 테두리 같은 도구를 한 번에 볼 수 있습니다.Type the tool name into the search box on the home page, or open the Developer tool category there to see WCAG Contrast Checker, CSS Color Names, CSS Border Generator side by side.