contrast check 위젯

[yoonk2]

Summary

의도한 색상 조합에 대한 APCA Contrast를 Figma에서 추적할 수 있는 위젯을 추가합니다.

Motivation

image from https://ruitina.com/apca-accessible-colour-contrast/

• WCAG 2.x의 색상 대비 공식은 배경색이 밝은 경우가 아닐 때 실제로 사용자가 인지하는 대비와 차이가 크다는 문제가 알려져 있습니다.
  • 특히, 당근 브랜드 색상을 사용하는 방식에서 문제가 더 자주 드러나게 됩니다.
• 따라서, APCA 를 사용해 더 인지적으로 균일한 색상 대비를 계산하고자 합니다.
• 한편, 디자인 시스템 팔레트를 개선하는 과정에서 접근성 충족을 추적하는 것은 쉽지 않았습니다.
• 결론적으로, APCA 대비 점수를 사용하며 Figma에 지속적으로 동기화되는 Figma Widget을 작성합니다.

Approach

• 의도한 background / foreground 조합을 Figma의 FrameNode, TextNode로 만들어서 등록합니다.
  
• 특정 프레임 안에 있는 모든 FrameNode / TextNode 쌍에 대해 APCA 점수를 계산해 위젯에 시각화합니다.
• APCA는 점수에 따라 적합한 {폰트 굵기, 폰트 크기}의 범위를 계산할 수 있는 테이블을 제공하고 있습니다.
• 이를 활용해 각 색상 조합마다 폰트 굵기별로 적합한 최소 폰트 크기를 함께 제시합니다.

Preview

[changeset-bot]

⚠️ No Changeset found

Latest commit: f34041f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR