프론트엔드 × 접근성 on Codeslog https://www.codeslog.com/series/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C--%EC%A0%91%EA%B7%BC%EC%84%B1/ Recent content in 프론트엔드 × 접근성 on Codeslog Codeslog https://www.codeslog.com/images/default-cover.png?v=20260114T1436 https://www.codeslog.com/images/default-cover.png?v=20260114T1436 Hugo -- 0.150.0 ko Tue, 21 Jul 2026 00:30:00 +0900 색은 맞는데 대비는 틀렸다: CSS opacity가 파놓은 접근성 함정 https://www.codeslog.com/posts/opacity-contrast-trap/ Tue, 21 Jul 2026 00:30:00 +0900 https://www.codeslog.com/posts/opacity-contrast-trap/ CSS에 진한 회색을 넣었는데 접근성 검사기는 대비 미달이라고 합니다. 범인은 opacity예요. opacity가 글자색을 배경과 섞어 대비를 깎는 원리와, 실제 블로그에서 겪은 사례·계산·해결법을 초보 눈높이로 정리합니다. 고대비 모드 제대로 지원하기: forced-colors와 시스템 색 https://www.codeslog.com/posts/high-contrast-mode/ Sat, 18 Jul 2026 22:47:00 +0900 https://www.codeslog.com/posts/high-contrast-mode/ 다크모드는 내가 색을 고르는 일이지만, 고대비 모드는 OS가 강제하는 색에 응답하는 일입니다. forced-colors 미디어 쿼리와 시스템 색 키워드, prefers-contrast로 저시력 사용자까지 지원하는 법을 실전 코드로 정리합니다. 다크모드 제대로 구현하기: CSS 변수 설계부터 색 대비 검증까지 https://www.codeslog.com/posts/dark-mode-implementation/ Sat, 18 Jul 2026 02:44:00 +0900 https://www.codeslog.com/posts/dark-mode-implementation/ CSS 변수로 다크모드 토큰을 설계하고, prefers-color-scheme과 JS 토글을 함께 구현하는 방법을 설명합니다. 다크모드에서도 색 대비 기준을 만족시키는 실전 패턴을 알아보세요.