접근 가능한 대비
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/accessible-contrast/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>
Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/accessible-contrast/
Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/accessible-contrast/)
Use the native HTML custom element.
시각 장애가 있는 사용자의 가독성을 보장하기 위해 전경색과 배경색 사이에 확보해야 하는 충분한 휘도 차이.
Accessible contrast goes beyond simply meeting WCAG numerical thresholds. It involves considering the full context of how colors are used: text size and weight, surrounding colors, the viewing environment, and the target audience. A color pair that technically passes 4.5:1 may still be hard to read if the text is thin, the background is patterned, or the viewer is in bright sunlight. Best practices include testing contrast on actual devices, considering the lowest-common-denominator display, and preferring higher contrast ratios when possible. Tools like APCA (Advanced Perceptual Contrast Algorithm) are emerging as more perceptually accurate alternatives to the current WCAG formula.
직접 해보기
관련 글
CSS light-dark() 기능: 기본 테마 전환
기본 테마 전환에는 CSS light-dark()를 사용하세요. 밝은 모드와 어두운 모드 색상을 위해 JavaScript 토글과 미디어 쿼리를 단일 CSS 함수로 대체합니다.
동적 색상 시스템을 위한 CSS 사용자 정의 속성
CSS 사용자 정의 속성을 사용하여 유지 관리 및 테마 지정이 가능한 색상 시스템을 구축하는 방법을 알아보세요. 변수, 밝음/어두움 모드, 런타임 JS 색상 변경을 다룹니다.
동적 색상 생성: 디자인 시스템을 위한 알고리즘
디자인 시스템을 위한 단일 브랜드 색상에서 음영 생성, 대비 인식 색상 선택, 다크 모드 팔레트 파생 및 테마 생성 이면의 알고리즘을 알아보세요.
모두가 사용할 수 있는 접근 가능한 색상 팔레트 설계하기
WCAG 기준을 충족하는 접근 가능한 색상 팔레트 설계 방법을 알아보세요. 색맹, 대비 비율, 중복 인코딩, 실제 예시를 포함한 테스트 워크플로우를 다룹니다.