대비 가드를 만들고 바로 통과시켰다. 초록불이 떴다.
그런데 초록불 하나로는 두 가지를 구분할 수 없다.
그래서 매번 일부러 깨뜨린다.
# 임계값 위반
sed -i '' "s/--muted: #70706e;/--muted: #b0b0ae;/" styles/tokens.css
node scripts/check-contrast.mjs # exit 1 이어야 한다
# 발행된 수치와의 드리프트
sed -i '' "s/--muted: #70706e;/--muted: #5f5f5d;/" styles/tokens.css
node scripts/check-contrast.mjs # 값은 유효하지만 문서와 불일치 -> exit 1
두 실패 모드가 다르다는 게 핵심이다. 첫 번째는 접근성이 깨진 경우고, 두 번째는 접근성은 멀쩡한데 문서가 거짓말하는 경우다. 방문자에게 숫자를 보여주는 디자인 시스템은 그 숫자가 거짓이 되는 순간을 알아야 한다.
캐스케이드 레이어 가드도 같은 방식으로 검증했다. 모듈을 다시 레이어 안에 집어넣고 빌드했더니 정확히 잡혔다.
testingtooling