Slop Colors · 무료, 브라우저에서
WCAG 기준으로 색 대비 확인하기
회색 글자를 흰 바탕에 놓으면 세련돼 보이지만 아무도 읽지 못할 수 있습니다. 두 색을 입력하면 Slop Colors가 WCAG 대비율, 통과하는 등급, 그 기준을 맞추는 가장 가까운 글자 색을 알려 줍니다.
하는 방법
- 대비 확인(WCAG 2)으로 스크롤해 글자 색과 배경 색을 HEX, RGB, HSL 또는 OKLCH 형식으로 입력하세요.
- 대비율과 다섯 가지 결과를 확인하세요: 일반 글자의 AA와 AAA, 큰 글자의 AA와 AAA, 그리고 UI 요소와 그래픽.
- 예시를 보세요: 두 색으로 된 큰 글자와 문단입니다.
- 일반 글자의 AA에 실패하면 글자 색 조정을 클릭하세요. 글자 색은 색조를 유지한 채 기준을 통과할 만큼만 밝거나 어두워집니다.
- 위치 바꾸기를 클릭하면 두 색의 위치를 바꿔 반대로 확인합니다.
파일은 이 기기에 그대로 남습니다. Slop Colors은(는) 브라우저에서 실행되며, 업로드, 계정, 워터마크가 없습니다.
질문
WCAG는 어떤 대비율을 요구하나요?
AA 등급은 일반 글자에 4.5:1, 큰 글자(24px 또는 굵은 18.66px)와 UI 요소, 그래픽에 3:1을 요구합니다. AAA 등급은 7:1과 4.5:1을 요구합니다.
왜 4.48이 아니라 4.47로 표시되나요?
WebAIM의 검사 도구와 같이 대비율은 내림해서 표시합니다. 그래서 4.499인 색 조합이 4.5 통과로 표시되는 일은 없습니다.
화면에 있는 색도 확인할 수 있나요?
Chrome과 Edge에서는 화면에서 색 고르기로 화면의 어느 픽셀이든 고를 수 있습니다. 그런 다음 패널에서 글자 색이나 배경으로 사용하세요.
어떤 것도 업로드되나요?
아니요. 색은 브라우저에서 페이지가 확인하며, 아무것도 어디로도 전송되지 않습니다.
Slop Colors에서 더 많은 작업
관련 앱
PhotoSlop
공개
브라우저를 위해 다시 만든 Photoshop.
SlopVector
공개
브라우저를 위해 다시 만든 Illustrator.
SlopIsolate
베타
기기에서 실행되는 AI로 배경을 제거하세요.