색상 대비 검사기

브라우저에서 전경색과 배경색의 WCAG 대비 비율을 확인하고 일반/큰 글자의 AA / AAA 통과 여부를 판정합니다.

색상 대비 검사기

색상 대비 검사기는 브라우저에서 전경색과 배경색의 WCAG 대비 비율을 로컬로 확인하고, 1:1부터 21:1까지의 비율과 일반/큰 글자의 AA / AAA 결과를 보여줍니다.

사용 방법

  1. 전경색과 배경색을 HEX, RGB, HSL 또는 일반 CSS 키워드로 입력합니다.
  2. 실시간 대비 비율과 AA / AAA 상태를 확인합니다.
  3. 미리보기 영역에서 실제 텍스트 가독성을 살펴봅니다.
  4. 보고서를 복사해 디자인 전달, 프런트엔드 검수, 접근성 기록에 사용합니다.

기능

  • WCAG 대비를 로컬로 계산
  • 일반/큰 글자의 AA / AAA 판정
  • 투명 색상은 흰색 위에 합성한 뒤 계산

왜 사용할까요?

  • 본문, 버튼, 링크, 아이콘 색상의 가독성을 빠르게 검증
  • 디자인과 구현 사이의 접근성 차이를 줄임
  • 데이터 업로드 없이 브라우저 안에서 색상을 점검

관련 색상 도구

GIF 메이커

정적인 이미지나 비디오 클립을 동적 GIF로 변환합니다.

이미지 크기 조정

이미지 크기를 일괄 조정하고 픽셀 또는 비율 기준, 비율 고정, 로컬 내보내기를 지원합니다.

이미지 ICO 변환기

이미지를 favicon 및 앱 아이콘용 ICO 파일로 변환하고 여러 크기를 한 파일에 담을 수 있습니다.

SVG to PNG/JPG

SVG를 PNG 또는 JPG로 내보내고, 크기와 배경색을 조정한 뒤 로컬에서 다운로드할 수 있습니다.

SVG 최적화기

브라우저에서 SVG 코드를 최적화하고 불필요한 메타데이터를 제거한 뒤 더 가벼운 SVG를 출력합니다.

EXIF 뷰어

브라우저에서 이미지의 EXIF, GPS, 카메라 정보와 촬영 파라미터를 읽어옵니다.

이미지 메타데이터 정리

브라우저에서 JPEG, PNG, WebP 이미지의 EXIF, XMP, ICC 등 메타데이터를 제거합니다.

이미지 팔레트 추출기

이미지에서 대표 색상, 비율, 팔레트를 추출하고 HEX, CSS, JSON으로 로컬 내보내기 할 수 있습니다.

색상 선택기

브라우저에서 수동 입력, 화면, 업로드한 이미지에서 색상을 추출하고 HEX, RGB, HSL, HSV, CMYK, CSS 값을 확인합니다.

색상 변환기

브라우저에서 HEX, RGB, HSL, HSV, HWB, LAB, LCH, CMYK, CSS 키워드 사이의 색상을 양방향으로 변환하고 알파 채널도 함께 다룹니다.

CSS 그라디언트 생성기

브라우저에서 linear-gradient, radial-gradient, conic-gradient 를 만들고 색상 스톱 편집, 실시간 미리보기, CSS 복사를 지원합니다.

CSS 박스 섀도 생성기

브라우저에서 box-shadow 오프셋, 블러, 스프레드, 투명도, 모서리 반경, inset 을 조절하고 실시간 미리보기와 CSS 복사를 지원합니다.

HTML 색상 이름

브라우저에서 HTML / CSS 이름 색상을 검색하고 둘러본 뒤 이름, HEX, RGB 값을 복사할 수 있습니다.

favicon 생성기

한 장의 이미지로 favicon 자산, site.webmanifest, HTML 스니펫을 생성합니다.

Gemini 워터마크 제거

Gemini 가시 워터마크를 브라우저 안에서 로컬 제거하고 일괄 처리 및 다운로드를 지원합니다.

이미지 AVIF 변환기

PNG, JPG 등 이미지를 일괄 AVIF로 변환하고 품질, 배율, ZIP 다운로드를 지원합니다.

PNG 압축기

PNG 출력은 유지하면서 용량을 줄이고, 배율, 색상 수 축소, 미리보기, ZIP 다운로드를 지원합니다.

이미지 WebP 변환기

PNG, JPG 등 이미지를 품질과 배율을 조정하며 일괄 WebP로 변환하고, 미리보기와 ZIP 다운로드를 지원합니다.