Skip to content

fix: 다크 모드 보조 텍스트를 muted·secondary·accent 면에서도 AA 대비가 나오게 밝힘 - #64

Merged
chanwoo7 merged 2 commits into
developfrom
fix/dark-muted-contrast
Oct 4, 2026
Merged

chanwoo7 merged 2 commits into
developfrom
fix/dark-muted-contrast

Conversation

@chanwoo7

@chanwoo7 chanwoo7 commented Oct 4, 2026

Copy link
Copy Markdown
Member

배경

  • 이슈 #43입니다. 다크 모드 보조 텍스트(--muted-foreground #85859a)가 muted·secondary 면(#26262f) 위에서 4.15:1로 WCAG AA(4.5:1)에 못 미쳤습니다.
  • 대비 검사 표가 다크의 background·card만 봐서 이 조합을 놓쳤습니다.

변경

  • 다크 --muted-foreground를 #8d8da2로 올렸습니다. 색상(OKLCH H 285.5)과 채도는 그대로 두고 밝기만 올렸습니다.

    • 보조 텍스트가 실제로 놓이는 다크 면 전부에서 4.6:1 이상이 되는 가장 작은 값입니다.
    다크 면 이전 이후
    background 5.09 5.65
    card·popover 4.69 5.21
    muted·secondary 4.15 4.62
    accent·surface-tint 4.50 5.00
    sidebar 4.95 5.49
    • 본문 텍스트(#f0f0f4)와의 대비는 2.86:1로, 여전히 한 단계 흐린 보조 텍스트로 읽힙니다.
  • 대비 검사 표에 다크 popover·muted·secondary·accent·surface-tint·sidebar를 추가했습니다.

테스트

  • 이전 색으로 되돌리면 새 행 중 muted·secondary·accent·surface-tint 4건이 실패하는 것을 확인했습니다.

플랜 대조

플랜 7번 불릿 상태
다크 muted-foreground를 모든 다크 면에서 AA 이상으로(밝기만) 한 것
다크 대비 표에 muted·secondary·popover 추가 한 것(accent·surface-tint·sidebar까지)

- 다크 --muted-foreground #85859a가 muted·secondary(#26262f) 위에서 4.15:1, accent·surface-tint(#201f2c) 위에서 4.50:1 미만(4.498)이라 본문 크기 기준 AA 4.5:1 미달. 대비 spec은 다크 background·card만 보고 있어 놓침
- 색상·채도(OKLCH C 0.031, H 285.5)는 그대로 두고 명도만 올려, 다크 면 전부에서 4.6:1 이상이 되는 가장 어두운 값 #8d8da2로 변경
  - background 5.65, card·popover 5.21, muted·secondary 4.62, accent·surface-tint 5.00, sidebar 5.49
  - foreground(#f0f0f4)와는 2.86:1로 여전히 한 단계 흐린 보조 텍스트
- 대비 spec에 다크 popover·muted·secondary·accent·surface-tint·sidebar 6행 추가(이전 색으로 되돌리면 muted·secondary·accent·surface-tint 4행 실패 확인)
@coderabbitai

coderabbitai Bot commented Oct 4, 2026

Copy link
Copy Markdown

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration
  • Configuration used: Repository: CaQuick/caquick-admin-fe/.coderabbit.yaml
  • Review profile: CHILL
  • Plan: Advanced
  • Run ID: 50f99352-46f6-43fe-913f-5b2d8064cd36

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
  • Autopilot · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@github-actions

github-actions Bot commented Oct 4, 2026

Copy link
Copy Markdown

Coverage Report

Status Category Percentage Covered / Total
🟢 Lines 96.06% (🎯 80%) 2442 / 2542
🟢 Statements 95.53% (🎯 80%) 2675 / 2800
🟢 Functions 94.27% (🎯 80%) 1005 / 1066
🟢 Branches 88.06% (🎯 70%) 2014 / 2287
File CoverageNo changed files found.
Generated in workflow #128 for commit dbe6ac4 by the Vitest Coverage Report Action

@chanwoo7
chanwoo7 merged commit 9ff8d3e into develop Oct 4, 2026
10 checks passed
@codecov

codecov Bot commented Oct 4, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant