Visual Design Principles for Old Black & White TVs (GreyVHF)
An anachronistic guide to designing new games that look and play great on ancient technology.
Notes / Disclaimer: I’m specifically calling this GreyVHF because the VHF standard supports color images, and some of these principles apply specifically to Black & White Displays. I provide critique of some games’ interface and art choices strictly from a GreyVHF viability standpoint. I love all the games I mention here.
Most displays today are fairly standardized: Flat, 16:9 (or Ultrawide if you’re feeling spicy), and high definition. We can cram a lot of small text in the UI without making the end user squint.
But sometimes, the retro charm wins out.
The year was 1975. The “Home PONG” console was just released. Zenith was a brand people knew outside of reruns of Nickelodeon Gameshows. And video reached households for free via VHF broadcast.
The VHF specification was roughly 480p. Theoretically, around 525x483, but in my experience a 720x480 signal has more accurate screen coverage.
Overall there are just a few principles that really go towards making a high quality VHF experience. In most cases here, I’ve provided a progression of good ideas that can be used on their own or in combination. Not every suggestion will work with every type of game.
VHF Safe Zones
While the VHF feed itself fills the full 480p rectangle, most displays have roundish corners that distort and mask the signal.
- Good: Use the provided guide to keep critical UI elements out of the danger zones.
- Better: Center your UI elements horizontally or vertically to avoid corners.
- Best: Adopt as minimal a UI as possible for the majority of gameplay, only showing necessary information in situ.
In my experience, the signal also bleeds over the edge of one or more corners, and not always evenly. I believe that the number of vertical scanlines are fairly stable, but horizontally they’re a bit looser. (My setup skews slightly to the left, for example.) Make sure to pad your display to ensure no elements are lost.
- Good: Use the provided guides to keep critical UI elements out of the danger zones.
- Better: Generously pad UI elements away from the edges of the screen.
- Best: Fully repositionable UI elements.
Contrast and Padding
A big part of video game art design is ensuring that elements of interest are decipherable against their surroundings. Sometimes this is accomplished by ensuring that the colors contrast. Sometimes that doesn’t work very well on VHF displays. There are a couple of great ways to handle this:
Luminance-Based Contrast: Look at colors’ luminance values in addition to other factors.
This chart shows colors’ perceived brightness when converted to greyscale. Not everything that contrasts well on the visual spectrum will do so when the color is stripped away. Bear in mind how the conversion to greyscale will affect your game’s readability.
For a more detailed explanation of accessibility guidelines related to contrast, WebAIM has a great article. The more accessible the design, the better it will perform in general in GreyVHF.
Simple Textures
The less “noise” (that is, small, high-contrast detail) is present in your game’s textures, the easier it will be to read it at smaller resolutions. Good examples of this are Paper Mario: The Origami King or Animal Crossing: New Horizons, where a lot of solid colors are grouped together. Textures have a low contrast which lets everything have room to breathe.
Padding
Elements that are surrounded with a solid high-contrast outline, or are placed in the middle of a high-contrast area, are easier to pick apart from the background. For great examples of this, check out the outlines around all characters in Paper Mario: The Origami King, or Animal Crossing: New Horizons’ dialog box.
Large Elements
The larger an element is, the easier it will be to see when rendered in 480p. Examples: Animal Crossing’s use of large bold fonts allows everything to be read on a tiny display. Weird West’s main menu features large boxes with large font, letting each option stand out.)
This commonly becomes a problem in information-dense interfaces where a lot of data needs to stand out. Death Stranding’s inventory UI is a prime example of information density not translating well to GreyVHF.
Weird West forces a minimum resolution of 720p, which allows for it to display some fine detail in the UI including the aiming sight lines and most of its text. (Again, disclaimer, this is not a critique of the game. It’s only an example of a type of UI design that does not work well in this ultra-niche format. Weird West is a wonderful game and everyone should go buy it right now.)
Setting it up for Yourself
Okay by now I’m sure you’re wondering how the heck anyone sets this up for themselves. It’s actually pretty straightforward, if a bit fiddly! The hardest part is not knowing which part is hard. It took me several hours the first time to get the right combination of broadcast channel, receiving channel, antenna placement, and figuring out the TV’s signal-acquiring behavior. Once you have signal coming through, it’s much easier to fine-tune everything.
Parts Used
Disclaimer: These are Amazon Affiliate links to the parts I ordered for my setup.
The signal chain is as follows: connect it all together! Plug the composite end of the adapter into the RF modulator, and the antenna into the RF Out on the modulator. Plug the HDMI into your source, set the channel, and turn the TV on! (Channel 9 worked best for me and my TV, but your mileage may vary.)
Note: My TV is a 1975 “Spirit of ’76” Zenith and has the quirk of requiring the signal to be actively broadcast when the TV turns on. I’m not sure if this applies to other TVs of the same type. If the TV is showing nothing but static, turn it off for a few seconds, make sure the HDMI is outputting, and turn the TV back on. If you adjust the channel while powered on, you might need to turn it off and on again.
The antenna needs to be well-positioned and is subject to interference. I’ve had the best luck when the antenna was positioned right behind the target TV, but if that’s not possible then I recommend positioning it in a location where no living thing will cross between it and the TV’s antenna.
If you’re using a PC, you can set your program’s audio to go to the HDMI output, and it should be broadcast along with the video. Hearing the media’s audio through the TV hardware adds to the experience. Let me know if there’s interest in doing an audio design guide for VHF broadcast!
Conclusion
There’s an inherent charm in viewing new content through a vintage lens. A retro-futuristic aesthetic you can do yourself. The guidelines I’ve laid out here are largely just general accessibility guidelines: if your content is visually accessible, it will likely work well through the GreyVHF lens, and vice versa.
GreyVHF can be seen as a good standard to target. If your content works well on something as picky as low-resolution black-and-white GreyVHF, it will likely be accessible on most other platforms.
I encourage developers to target the GreyVHF standard, and I encourage gamers to rig their own GreyVHF setup.
Acknowledgements
A special thank you to my good friend Michael Lanigan for his invaluable critique. And a regular thank you to Josh Cole and for the inspiration to write a technical article in the first place.
Contact
If you’d like to contact me about implementing the GreyVHF standard, testing some content on my personal GreyVHF setup, or anything else, I can be best reached via email or Twitter.
