freeCodeCamp / freeCodeCamp/ui
Need a light theme equivalent of `yellow40`
- Dominant language
- TypeScript
- Stars
- 75
- Forks
- 37
- Avg merge
- 1m
- Merged PRs (30d)
- 1
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 |
Contributor guide
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.
Assessment
- Domain
- accessibility, design
- Issue type
- Feature
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100