A lot of times I seem to completely lose track of the UI elements due to the background, as shown here with the crosshair barely being visible:
This is obviously a problem as it can detract from getting a clear targeting solution during combat in various situations.
The best way I can think of is to increase HUD luminance + add a slight dark filter effect, similarly with how it is done in jet fighters.
Technically, you could have it like so:
- BOTTOM LAYER - the rendered scene
- MID LAYER - a black overlay with high transparency
- TOP LAYER - the HUD, with a higher luminance than what is now
Here’s a mock-up of that:
Other options:
- increasing opacity and adding an outline to all elements could also work but it won’t be guaranteed + it might not look very nice
- an invert option on the text (similar to
filter: invert(1)in CSS)
