Constrast on Step 9-10 UI component backgrounds

[ezg27]

Hi there, really love what you guys have done with this library and others (Stitches + Primitives are next level 🔥) and looking at using this on my next project. However I wanted to double check re the Steps 9–10: Solid backgrounds section in the docs, as I may have missed something https://www.radix-ui.com/docs/colors/palette-composition/understanding-the-scale#steps-910-solid-backgrounds.

It advises that these points on the color scale are useable for component backgrounds in combination with white text, and shows a grid of typical button elements to demonstrate. But of the buttons in the list, only the Plum, Purple, Violet, Indigo, Sky, Mint, Lime, Yellow, and Amber meet the minimum 4.5:1 ratio guideline for this font size, despite bold text being used. A font size of 18.6px (ish) or more would lower the acceptable contrast ratio to 3:1 allowing the others to pass, but the displayed buttons are set with 15px.

It’s a similar situation with the example ‘call-to-action' buttons under the Steps 3–5: Component backgrounds section - over half of the buttons have a contrast below 4.5:1.

I’m wasn’t aware of any exceptions to the 4.5:1 ratio guideline for text in UI elements (other than the previously stated larger + bold text combo lowering it to 3:1), but I may be wrong - I’m hoping I am as I really like the look of this library :). Is this a conscious compromise to allow the most widely useable palette of colors, and buttons like these should only be used with larger font sizes than those displayed, or am I missing something?

Many thanks!

[marozzocom]

Hi, the exception is mentioned in the documentation on contrast. With 14pt bold (600) text, 3:1 ratio should be enough.

But as you said it seems that this guideline is not followed on the docs page on solid backgrounds.

I think documentation on this could be improved as I was initially confused as well (and still am to a degree), and had to do some digging to find out the reasoning here. Ideally there would be no need to increase font-size or font-weight when creating controls with step 9 background, but I understand how this might not be achievable. I also understand that design choices on font-size and so on are outside the scope of a color library, but at least the examples could be made to qualify for an AA rating, and perhaps addressing this issue and the thinking behind it would be helpful.

[akyag]

what solution did you both go for? I am not sure if the colors will be changed here to achieve the AA rating.