freeCodeCamp / freeCodeCamp/ui

Need a light theme equivalent of `yellow40`

Open
#782 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.