Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Color converter: the contrast ratio shows `4.50 : 1` while Normal AA says FAIL

Đã đóng
  • Có gì không ổn?
#235 5 bình luận 0 reaction 1 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@bercedev đang làm issue này rồi.

Từ ngày 21/10/2026.

  • #245 của @bercedev — đang mở

Đánh giá

Issue này chưa được đánh giá.

Mô tả

bug good first issue hacktoberfest

In the color converter's WCAG Contrast Checker, set Text / Foreground to #FFFFFF and Surface / Background to #EB1717. The ratio reads 4.50 : 1, and the Normal AA badge (which needs 4.5:1) says FAIL.

Both come from the same number, 4.499327326513352. The FAIL is right and the display isn't: formatRatio (app/(tools)/color-converter/ColorConverterClient.tsx, lines 33 to 35) uses toFixed(2), which rounds it up to 4.50. W3C's Understanding SC 1.4.3 says the computed ratio should not be rounded ("4.499:1 would not meet the 4.5:1 threshold"), so a checker that shows 4.50 next to FAIL leaves people unsure which of the two to believe.

It happens at the other thresholds too:

Text Background Ratio Shown now Expected Threshold it misses
#FFFFFF #EB1717 4.499327326513352 4.50 : 1 4.49 : 1 4.5:1 (Normal AA, Large AAA)
#EE0707 #FFFFFF 4.497858855042646 4.50 : 1 4.49 : 1 4.5:1 (Normal AA, Large AAA)
#575757 #CCCCCC 4.499612814225531 4.50 : 1 4.49 : 1 4.5:1 (Normal AA, Large AAA)
#959595 #FFFFFF 2.9953461357088114 3.00 : 1 2.99 : 1 3:1 (Large AA)
#176363 #FFFFFF 6.996878801802648 7.00 : 1 6.99 : 1 7:1 (Normal AAA)

The badges come from wcagRating (lib/color-utils.ts, line 473), which compares the unrounded ratio, so they're already correct.

What to do

  • Truncate the shown ratio to two decimals instead of rounding it, so it never shows more contrast than the colors have: 4.4993 shows 4.49, and exactly 4.5 still shows 4.50.
  • Watch out for floating point: Math.floor(4.56 * 100) / 100 is 4.55, because 4.56 * 100 is 455.99999999999994. A ratio of exactly 4.56 should still show 4.56.
  • Move the helper to lib/color-utils.ts (for example formatContrastRatio) so it can have unit tests, and use it at line 601.
  • The default pair (#FFFFFF on #0A0B0F, 19.668948449427404) will show 19.66 instead of 19.67. That's expected.
  • Leave wcagRating and the colored bar (lines 609 to 613) as they are.

Where to look

  • app/(tools)/color-converter/ColorConverterClient.tsx: formatRatio (lines 33 to 35) and where it's shown (line 601)
  • lib/color-utils.ts: contrastRatio (line 444) and wcagRating (line 473)
  • lib/__tests__/color-utils.test.ts: the contrastRatio tests (line 142) and the wcagRating tests (line 195)

Acceptance criteria

  • Every row in the table shows the expected ratio, and the PASS/FAIL badges don't change
  • Ratios of 21, 1, 4.5 and 4.56 show 21.00, 1.00, 4.50 and 4.56
  • Unit tests for the helper with the table rows and these values
  • npm run lint, npm run test and npm run build pass

Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off develop, and open your PR against develop with Closes #235 in the description.

Ngôn ngữ chính
TypeScript
Star
1
Fork
9
Merge trung bình
7 giờ 34 phút
Pull request đã merge (30 ngày)
146

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của codercops/toolbelt

Tất cả issue của codercops/toolbelt

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.