1

I am designing an app targeted towards an older audience (age 65+) so my app needs to have high contrast to be visible. I am using a contrast checker and according to WCAG standards, any yellow does not meet the 4.5:1 recommended contrast level. The closest yellow I can find is this, which to me does not look like a typical "warning" yellow that people might see on a stoplight or a green->yellow->red rating scale:enter image description here

Is there an alternative to using the color yellow as a warning? (Orange works better, but still not as good according to these standards) Can I add something to the yellow text (dropshadow, outline, etc) to make it contrast more?

4
  • why don't use a yellow background and a darker color for text? It's easier for accessibility and also more common than white background
    – Devin
    Commented Feb 14, 2023 at 18:55
  • @Devin The white background is the default background of our app in general. So the only way I can add a yellow background is to put a small rectangle/pill shape background and the text on top. Similar to how the "Pass" text in the image I posted has a green pill background with white text. I was hoping to avoid this kind of UI because I feel it doesn't fit with the rest of our design, but it is always an option
    – Gene
    Commented Feb 14, 2023 at 19:07
  • 1
    "...yellow background is to put a small rectangle/pill shape background and the text on top." —just like a road warning sign. I expect I'd give it a small black edge to push the yellow shape off the white background. Commented Feb 14, 2023 at 19:17
  • @bloodyKnuckles Thats a fair point. I tried to solve this with just text color, but it seems that adding a background is not that bad of an idea. Thanks
    – Gene
    Commented Feb 15, 2023 at 1:59

1 Answer 1

1

If the color you have chosen does not match the contact, you have several options:

  • Change the shade of yellow

Use a darker version of yellow that passes the contrast test. Also, don't forget to check what is the minimum text size and weight you can use with this color.

enter image description here

  • Use background

It is not necessary that the text should be yellow in order to convey some idea to the user. You can use standard dark text on a yellow background. In addition, if you add a couple more visual elements in the same color (labels, icons ..), this will further improve the perception of your design and thought. enter image description here

  • Change hue

Try changing the color from yellow to orange. In most cases, this color intuitively replaces yellow and can be used to indicate warnings, benchmarks, attention messages, etc.

enter image description here

Your Answer

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

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