Color converter: the contrast ratio shows `4.50 : 1` while Normal AA says FAIL
维护者通常 1 天内回复
评估
这个 Issue 还没有评估数据。
描述
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 shows4.50. - Watch out for floating point:
Math.floor(4.56 * 100) / 100is4.55, because4.56 * 100is455.99999999999994. A ratio of exactly 4.56 should still show4.56. - Move the helper to
lib/color-utils.ts(for exampleformatContrastRatio) so it can have unit tests, and use it at line 601. - The default pair (
#FFFFFFon#0A0B0F, 19.668948449427404) will show19.66instead of19.67. That's expected. - Leave
wcagRatingand 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) andwcagRating(line 473)lib/__tests__/color-utils.test.ts: thecontrastRatiotests (line 142) and thewcagRatingtests (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.50and4.56 - Unit tests for the helper with the table rows and these values
-
npm run lint,npm run testandnpm run buildpass
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.
- 主要语言
- TypeScript
- 星标
- 1
- 派生
- 9
- 平均合并
- 7 小时 34 分钟
- 30 天内合并 PR
- 146
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
codercops/toolbelt 的其他 Issue
-
bug
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复
-
Cron explainer says "on weekdays" for `0 0 1-31 * 1-5`, but the next runs include weekends可能已有人在做 @Saifjafri212213 今天认领。 未关闭bug hacktoberfest help wanted
codercops/toolbelt#329 · 2 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
-
UUID generator's v7 batch comes out in random order instead of time order可能已有人在做 @omisha123 今天认领。 未关闭bug good first issue hacktoberfest
codercops/toolbelt#316 · 3 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
-
Invoice generator shows a subtotal of -$0.00 when the line items cancel out可能已有人在做 @shresthgoel77-png 今天认领。 未关闭bug good first issue hacktoberfest
codercops/toolbelt#315 · 2 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
-
JSON formatter's "Did you mean" hint reads inside strings, so a missing comma near a URL says to remove comments可能已有人在做 @kachamsiddarth 今天认领。 未关闭bug good first issue hacktoberfest
codercops/toolbelt#314 · 2 条评论 · 已指派 1 人 ·
维护者通常 1 天内回复
查看 codercops/toolbelt 的全部 Issue
相似的 Issue
-
难度 2/5 1-3 小时 新手友好度 72/100
braintrustdata/braintrust-sdk-javascript#2659 ·
维护者通常 1 天内回复
-
body-parser 2.3.0 in the published ai-dial-chat-bff image is vulnerable (CVE-2026-111181, HIGH)可能已有人在做 @illya-havsiyevych 今天认领。 未关闭bug
难度 1/5 1-3 小时 新手友好度 87/100
epam/ai-dial-chat#9566 ·
维护者通常 1 天内回复
-
bug
难度 2/5 1-3 小时 新手友好度 83/100
维护者通常 1 天内回复
-
はさみアイコンを修正する未关闭bug
难度 1/5 1 小时以内 新手友好度 68/100
-
area: core
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复