Need a light theme equivalent of `yellow40`
Maintainers usually reply within 1 day
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 55/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Quiet
- Domain
- accessibility, design
Research direction
Start by locating the existing yellow40, yellow70, and yellow80 color definitions and any theme or color tests. Add the proposed yellow75 value (#7b5e2c) where the palette is defined, then verify that it meets the listed WCAG AA contrast ratios across the light-theme backgrounds.
Written by the indexing model from the issue text.
Description
Description
We use yellow40 (#ffc300) as the primary yellow color. While it works well as a background color, it is too bright to use as text in the light theme and does not provide sufficient contrast against light backgrounds.
yellow70 (#8a6d3b) is a potential candidate, but it falls just short of the minimum WCAG AA contrast requirement against the secondary and tertiary backgrounds. yellow80 (#66512c) meets the contrast requirement, but it leans too far toward brown.
I experimented with a few intermediate shades and found that #7b5e2c could be a good candidate. It sits right on the border where gold begins to look brown, and meets the contrast requirement across all light theme background levels. It could be introduced as yellow75.
primary bg (#ffffff) |
secondary bg (#f5f6f7) |
tertiary bg (#dfdfe2) |
|
|---|---|---|---|
yellow70 (#8a6d3b) |
✅ 4.84:1 | ❌ 4.48:1 | ❌ 3.64:1 |
yellow75 (#7b5e2c) |
✅ 6.03:1 | ✅ 5.57:1 | ✅ 4.53:1 |
yellow80 (#66512c) |
✅ 7.55:1 | ✅ 6.98:1 | ✅ 5.68:1 |
- Dominant language
- TypeScript
- Stars
- 77
- Forks
- 38
- Avg merge
- 5h 51m
- Merged PRs (30d)
- 42
Getting set up
- No Dockerfile or Docker Compose file
- Has a pull request template
- Read the contributing guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from freeCodeCamp/ui
-
bug: Dark Mode not implemented correctlyPossibly taken @debabratasaha-dev claimed this 182 days ago. Open
Difficulty 3/5 1-2 days Newbie friendliness 42/100
freeCodeCamp/ui#778 · 4 comments ·
Maintainers usually reply within 1 day
-
Multiple Answer Quiz Question ComponentPossibly taken @Pratikkuntawar claimed this 9 days ago. Open
Difficulty 5/5 Over a week Newbie friendliness 35/100
freeCodeCamp/ui#757 · 1 comment ·
Maintainers usually reply within 1 day
-
release: major status: blocked
Difficulty 5/5 Over a week Newbie friendliness 30/100
freeCodeCamp/ui#511 ·
Maintainers usually reply within 1 day
-
release: major status: blocked
Difficulty 2/5 1-3 hours Newbie friendliness 35/100
freeCodeCamp/ui#83 ·
Maintainers usually reply within 1 day
-
Dependency DashboardOpen
Difficulty 5/5 Over a week Newbie friendliness 15/100
freeCodeCamp/ui#42 ·
Maintainers usually reply within 1 day
Similar issues
-
Difficulty 1/5 Under an hour Newbie friendliness 85/100
formbricks/formbricks#9918 ·
Maintainers usually reply within 1 day
-
enhancement
Difficulty 2/5 1-3 hours Newbie friendliness 65/100
thecodacus/pithagoras#364 ·
Maintainers usually reply within 1 day
-
Difficulty 1/5 Under an hour Newbie friendliness 72/100
openclimatefix/quartz-frontend#823 ·
Maintainers usually reply within 4 days
-
area:agent-manager community needs-triage
Difficulty 2/5 1-3 hours Newbie friendliness 76/100
Maintainers usually reply within 1 day
-
`contacts.create` posts to `/audiences/undefined/contacts` when `audienceId` is undefinedPossibly taken @RaphaelFakhri claimed this today. Open
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
resend/resend-node#1176 ·
Maintainers usually reply within 1 day