접근성 색상 대비 팔레트

브라우저 처리

접근성 색상 대비 팔레트는 기본 색상 표를 출발점으로 텍스트와 배경 조합의 명도 차이, WCAG 대비 확인, 안정적인 UI 색상 선택을 돕는 참고 도구입니다.

도구 실행입력 후 결과 확인

접근성 색상 대비 팔레트 샘플 실행

브라우저 처리

샘플 입력

접근성 색상 대비 팔레트 샘플 입력
- 목적: 접근성 색상 대비 팔레트는 기본 색상 표를 출발점으로 텍스트와 배경 조합의 명도 차이, WCAG 대비 확인, 안정적인 UI 색상 선택을 돕는 참고 도구입니다.
- 확인할 값: 예시 데이터를 붙여 넣고 실행합니다.

샘플 결과

접근성 색상 대비 팔레트 샘플 결과
입력값을 분석한 뒤 복사 가능한 결과, 오류 안내, 다음 작업 힌트를 이 영역에 표시합니다.

자바스크립트가 활성화되면 이 영역이 실제 입력, 실행, 결과 패널로 바뀝니다.

접근성 색상 대비 팔레트 사용 가이드

접근성 색상 대비 팔레트는 과거 웹 세이프 컬러 표를 단순히 보여 주는 데서 한 단계 나아가, 텍스트와 배경 조합을 고를 때 명도 차이와 접근성 기준을 함께 생각하도록 돕는 색상 참고 도구입니다.

접근성 색상 대비 팔레트에서 값을 조정하며 미리보기와 생성 결과를 비교할 때 사용합니다.
복사한 스타일이나 코드를 실제 프로젝트에 적용하기 전 반응형 화면과 키보드 접근성을 확인할 때 사용합니다.
색상 표에서 후보 색을 고릅니다. 텍스트와 배경처럼 함께 쓰일 색 조합을 정합니다. 컨트라스트 대비 확인기에서 명도 대비를 검토합니다. 상태 색상이나 디자인 토큰으로 확장할 색만 남깁니다. 브랜드 색상과 함께 쓸 때 과도하게 채도가 높은 조합은 줄입니다.

미리보기와 실제 화면이 다름

기존 스타일의 우선순위와 부모 요소의 크기, 상속된 값을 확인하세요.

생성한 코드가 적용되지 않음

선택자와 단위가 맞는지 확인하고 기존 CSS와 충돌하는 속성을 점검하세요.