1

I am developing a iOS app, for which the main screen is used to scan a QR code. I want the camera to cover the screen, and at the same time display several text elements.

My main strategy so far has been to use semi-transparency. The top banner uses a semi-transparent background, and all the other UI elements have semi-transparent color.

My main worry is that the UI elements should be readable under both bright and dark lighting. At the moment, the text is not very readable with a bright camera feed.

What are "tricks" to make UI elements more readable when overlaid on top of a camera feed? Note that I want to keep the UI clean and minimal.

Improve this question
1
  • Can you also include a version of the screenshot with a high contrast background, because the image you have doesn't really illustrate the problem well. I suggest something like this: i.imgur.com/WHzigr8.jpg
    – tohster
    Apr 13, 2015 at 7:59

3 Answers 3

Reset to default
2

Try a visual treatment like this? by using a semi transparent black panel. doesn't matter if the background is too light or too dark.

Improve this answer
0

Do you need the entire screen to be transparent? If not, you can easily change the placement of the text to be on a less transparent background.

Improve this answer
0

Text Outline

Give your text a text outline effect or border of .5px. So that it will be readable.

Option 2: You can for dark grey fonts.

Reason: QR codes will be in all colors except white and the QR code will be only covered only in that target area leaving background to be white.

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.