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 |
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
#7b5e2ccould 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 asyellow75.#ffffff)#f5f6f7)#dfdfe2)#8a6d3b)#7b5e2c)#66512c)