2

There is a debate between the UI and the UX staff about "How opaque should a secondary text be?"

This is the example UI:

enter image description here

The design is meant to be minimalist. We use only black & white, no colors at all. And there is a small text: "Only > $10 orders".

The UX staff wants to make it 80% opaque (see last item) because it is important for the end-user to be aware of it. The UI staff wants to make it 15% opaque (see first item) otherwise they feel the minimalist design gets broken.

From a UI/UX objective point of view. How opaque should secondary texts be?

Improve this question
1
  • 1
    The secondary text indication a restriction on the Premium selection. I don’t know the context, but if the choice is coming near the end of a process, then you could just disable the premium option unless the order is over $10 and use a tool tip to explain why it’s disabled. If the order is over $10 you enable the option and don’t need any secondary text at all...
    – Dwev
    Jan 20, 2018 at 6:18

2 Answers 2

Reset to default
3

If you would like your site to be accessible, use a contrast calculator to ensure your site meets WCAG requirements.

If you don't want your site to be accessible, use 15% opacity on a white background...

Sorry if that's curt, but 15% opacity is entirely too light for people with even moderate visual impairments. Additionally, if someone even with perfect vision is trying to view your site in a less-than-optimal environment (direct sunlight, dim or damaged monitor, cracked phone screen, etc...), then it will be nearly impossible to read. I understand wanting a minimalist design, but you shouldn't create a situation where a significant percentage of your users will have great difficulty using it.

Improve this answer
1

The secondary nature of the text is communicated by its relative size, not by its color, and you should design text for readability, not for how much it "feels like" it fits a certain aesthetic.

The text in question already has a secondary status, communicated by its position within the typographic heirarchy, so in practical terms, you can afford to have the text at 100% opacity.

If you want to lighten the text, use an text contrast accessibility checker, and lighten until just before it fails. Do not go any lighter. Put function before form

Use a tool like https://webaim.org/resources/contrastchecker/ to find the lightest version of your text color that passes for basic readability. If your starting color is #000000, don't go darker than #5C5C5C

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.