Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Color in Printed Text vs. Web Text

In print design, we are accustomed to seeing pure black text against white paper. It is, in fact, a standard combination in printed documents done through at-home or in-office printers. It is also quite common in books.

In digital design, however, pure black text against pure white text isn’t so ideal. One of the main reasons is eye strains. Pure black text against pure white background on digital screens actually causes significant straining on user’s eyes.

Instead, we recommend using dark gray text against white backgrounds for digital design.

Another reason is, dark gray colored text against white background somehow always looks more elegant than pure black against white. So from the standpoint of visual design aesthetics, using dark gray text against white makes it not only easier to read but also better to look at.

What happens if we need to use a dark background? The same rule in reverse applies. Never use 100% black against 100% white. If you are familiar with hex codes, remember to check that you are not using #000000 against #ffffff.

Instead, either use a dark gray background against white text or use very light gray text against pure black background.

As to which dark gray to use as text or background, and which light gray would work best if the background is pure black, you as the designer needs to experiment and test using color contrast checkers to make sure that the color you chose still meets accessibility standards.

Scroll to Top