Monday, February 20, 2017

The readability of DOS applications

My recent article about how web pages are becoming hard to read had me wondering: I grew up with DOS, and I still work with DOS, so what's the readability of DOS applications?

Web pages are mostly black-on-white or dark-gray-on-white, but anyone who has used DOS will remember that most DOS applications were white-on-blue. Sure, the DOS command line was white-on-black, but almost every popular DOS application used white-on-blue. (It wasn't really "white" but we'll get there.) Do an image search for any DOS application from the 1980s and early 1990s, and you're almost guaranteed to yield a forest of white-on-blue images like these:

FreeDOS 1.2 install program

As Easy As, the shareware DOS spreadsheet

Free Point of Sale for DOS, by Dale Harris

DosZip, the file manager for DOS

FreeDOS EDIT

DOS is an old operating system. DOS stands for "Disk Operating System" and was designed to let you run applications. People like to think of DOS as being a command-line operating system, and while you could do manipulate file contents at the command prompt with a limited set of tools, DOS really didn't have the rich set of command-line tools like Unix and Linux enjoy. You mostly used the DOS command line to run different applications.

As an operating system interface, DOS was entirely text-based. It used BIOS services on your computer to do most of its work, including displaying text. With DOS, you had a color palette of sixteen colors, enumerated 0 (black) to F (bright white). But most users didn't know the 0–F codes, only the sixteen ANSI escape codes, divided into "normal" and "bright" modes. I've also included the RGB color representation of each:
NormalBright
30Black0,0,0Gray85,85,85
31Red170,0,0Bright Red255,85,85
32Green0,170,0Bright Green85,255,85
33Brown170,85,0Yellow255,255,85
34Blue0,0,170Bright Blue85,85,255
35Magenta170,0,170Bright Magenta255,85,255
36Cyan0,170,170Bright Cyan85,255,255
37White170,170,170Bright White255,255,255
You used these codes by loading an ANSI driver (called ANSI.SYS on MS-DOS, or NANSI.SYS on FreeDOS) and entering an ANSI escape sequence. Most people I know used the ANSI escape codes to make their DOS prompt more colorful, which you could do by using $E to represent an ESC character. For example, you could set red text with $E[31m or bright red text with $E[31;1m. Similarly, the range 40–47 represented background colors.

You may wonder about the brown/yellow line. That's not a typo; it wasn't really "yellow" and "bright yellow" although some references did call them that.

The general trend in the RGB color representations is the "normal" mode colors use 0 or 170, but "bright" mode colors replace 0 with 85 and 170 with 255.

If you have any familiarity with DOS, you should remember most applications using white-on-blue text. But how readable was this text? Using a Bash script to calculate contrast ratios of text, we can compute the readability of a few common color configurations from popular DOS applications.

White text on a blue background was generally considered (at the time) as easier to read, and prettier to look at, than plain white-on-black. And if you've sprung for that expensive monitor that can display colors, you want color. So white-on-blue quickly became a de facto standard.

Remember that DOS didn't support styling of text. You couldn't do italics or bold. Instead, applications such as word processors used colors to represent styles. Most text would be displayed as white-on-blue. Bold text was bright-white-on-blue, italics text was often green-on-blue or cyan-on-blue, and headings were often yellow-on-blue. Error messages might appear in white-on-red or black-on-red with the title in bright-white-on-red. Warnings might be black-on-brown or white-on-brown with yellow-on-brown titles. Status lines were frequently black-on-cyan or black-on-white.

Let's examine the contrast ratios of these color combinations:
White on Blue5.71
Bright White on Blue13.29
Yellow on Blue12.45
Green on Blue4.26
Cyan on Blue4.63
Black on Red2.70
White on Red3.33
Bright White on Red7.75
Black on Brown4.00
White on Brown2.25
Yellow on Brown4.91
Black on Cyan7.32
Black on White9.03
The W3C definition of the contrast ratio falls in the range 1 to 21 (typically written 1:1 or 21:1). The higher the contrast ratio, the more the text will stand out against the background. For example, black text on a white background has a contrast ratio of 21:1.

The W3C says body text should have a contrast ratio of at least 4.5:1, with headings at least 3:1. But that seems to be the bare minimum. The W3C also recommends at least 7:1 for body text and at least 4.5:1 for headings.

But it's also important to remember that DOS text was quite large, compared to today's standards. By default, DOS used an 80-column, 25-line display. Even on a modest 15-inch display (not unreasonable for the time) each character is around .15" [3.81mm] wide and .36" [9.144mm] high. That's quite large compared to today's websites that may use 11pt text. (Assuming your DPI is set correctly for your display, if 72pt is an inch, 11pt is about .152" [3.86mm] high.)

With text at that scale, I think that means the minimum contrast ratio for DOS applications can be somewhere between the W3C's recommendations for body text and heading text. Let's assume a round number of about 4:1.

So how do DOS applications stack up? Notice that white-on-blue is a very comfortable 5.71. Actually, in the above examples, all text on the blue background is quite readable. Other colors are quite clear, as well. Only black-on-red (2.70), white-on-red (3.33) and white-on-brown (2.25) fall below the recommended minimum of 4:1.

Let's examine the DOS application screenshots. The FreeDOS 1.2 installer uses black-on-white (9.03) for its main text, with list selection in yellow-on-blue (12.75). The FreeDOS EDIT program uses white-on-blue (5.71) for its main text, with its menu in black-on-white (9.03) and status bar in black-on-cyan (7.32).

The As Easy As spreadsheet used white-on-blue (5.71) for its main text and data enty line, with comments in green-on-blue (4.26) column and row labels in black-on-white (9.03) and black-on-white (9.03) status bar and white-on-black (9.03) hint line.

These are all very easy to read colors, even by today's standards. I'm not suggesting that websites switch to a white-on-blue color scheme, but it is interesting to note that even with a simple color palette, DOS applications were doing okay for readability.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.