포트폴리오 히어로 — 라이트·다크 모드 대비 검증

2023-02-14 · 이미지 2

AI 분석

기울어진 테이프 라벨과 초대형 워드마크를 쓴 포트폴리오 히어로를 라이트·다크 모드에서 명도 대비로 검증한 화면이다.

좌측 상단 이름 블록, 우측 소개 문단과 세로 내비게이션, 프로필 사진 옆의 기울어진 테이프 라벨, 큰 헤드라인과 화면을 넘치는 초대형 워드마크로 히어로가 구성된다. 굵은 그로테스크 산세리프를 크기 대비로 위계화하고, 라이트 모드는 흰 배경에 짙은 남색 글자, 다크 모드는 짙은 남색 배경에 흰 글자로 반전하며 테이프는 연두색 띠 위에 회청색 하이라이트를 얹는다. 브라우저 개발자 도구의 색상 선택기가 전경색의 명도 대비 비율을 표시해 두 모드 모두 높은 대비 기준을 충족함을 보여준다. 장식적인 타이포 요소를 유지하면서 접근성 대비를 확보하는 라이트·다크 테마 설계 참고로 유용하다.

minimal · editorial · high-contrast · light-mode · dark-mode

accessibility color-contrast dark-mode hero high-contrast light-mode navbar portfolio theme-switching typography-focused

claude-opus-5-5 · 2026-10-21 16:31 · 신뢰도 0.88

Nitish Khagwal

@nitishkmrk · 팔로워 27.4K

작가 페이지 X

원본 트윗

14/15: With accessibility in mind, I made sure that all functional elements at least met the WCAG AA Color contrast requirements, and double-checked with APCA.

좋아요 4 · 리트윗 0

x.com/nitishkmrk/status/1625405748762259459