Yellow is a very light color compared to the rest of the colors, and it is at its most vibrant at these lighter values. As a result, using yellow with white or another light color can lead to problems. In an extreme but easy example to replicate, text with the color of #FFFF00 cannot be displayed against white as presented in the example below. (And it looks ugly when you try to darken it.) Since the problematic examples are too light to read, hover over the problem boxes to read them.
This is exactly what I mean. With a contrast ratio of 1.07:1, you can't read #FFFF00 on white at all.
And this shade of yellow, while it has a contrast ratio of 4.5:1, is pretty much not yellow anymore.
The yellow you see in the background is a darker shade of yellow that is still pleasing to the eyes. You have more leeway with yellow in general than you would by limiting yourself to RGB Yellow, but it is still relatively light. Because yellow gets duller the darker you make it, the blue channel is usually not necessary if you want a reasonably bright yellow. Unfortunately, the contrast ratio issues are still a problem even for large text.
This is better but the contrast ratio of 1.99:1 still fails the WCAG for both standard text and large text.
This is the lightest yellow you can have with a 4.5:1 contrast ratio, and even then it's already not yellow anymore.
But no matter how you slice it, yellow is a light color and is frustrating, if not impossible, to work with against white backgrounds in general. As demonstrated in the 4th example, you can't really have a yellow against white that passes the 4.5:1 contrast ratio for standard text.
Fortunately, color is relative and you can trick the human brain into thinking the value in one area is the same as another area, as seen in the title. If you look close enough the trick may fall apart. (The background color's contrast ratio of 1.99:1 would actually fail the WCAG against white as you can see in the third example above, and the title text's contrast ratio of 3.12:1 just barely passes the WCAG for large text.)
In the end, however, you will need to mind the contrast ratios of whatever colors you actiually use, as none of the RGB yellows are readable against white backgrounds. You must rely on psychological tricks to create the illusion of yellow.
General Rules
- Try to keep the red channel at least slightly higher than the green channel. Cooler yellows can be made by
- It's okay to not have the blue channel on if your red channel is less than 100%/255.
- Darker yellows ideally will be more reddish.
- Yellow is at its most vibrant when it's light. You will never get darker vibrant yellows.