Value is just a term that refers to the lightness or darkness of a color, with pure black and pure white being the ultimate contrasting values. But you certainly don’t have to have to stick to a black-and-white color palette to create a high­-contrast design. Playing lighter and darker colors off of each other is one of the easiest ways to add contrast and make certain parts of your design more visible.

As a simple example, think of dark text on a light background—or vice-­versa, as with this design. While it might otherwise be difficult to read small type on a photo, the contrast in values here (bright white typography over dark shades of purple and blue) makes it work.

02. Contrast with Color Hue

Hue is an artist’s term for a specific color, traditionally one of the 12 found on the color wheel. But color theory can come in handy for graphic and web designers, too. We can pull a number of classic palettes from the color wheel that painters have been using for centuries to create high-­contrast compositions. Some options include:

• Complementary: opposites on the color wheel, such as red/green or blue/orange; complementary colors are high-contrast and high­-intensity.

This badge uses a simple, complementary color scheme that’s both visually striking and practical, in that it separates and organizes various parts of the design into sections.

• Split­-Complementary: any color on the color wheel plus the two that flank its complement; this scheme still has strong visual contrast, but is less dramatic than a complementary color combination.

• Triadic: any three colors that are evenly spaced on the color wheel.

Keep in mind that you don’t have to use these hues in their purest, brightest forms (like those seen in the color wheel chart above, which can sometimes clash). Making your colors lighter, darker, or muted may be more practical for real­-life design contexts, but can still lend some nice contrast to your design.

03. Contrast with Color Temperature

All colors can be separated into groups based on their temperature: warm, cool, or neutral. Reds, oranges, and yellows are considered to be warm, while blues and greens are cool. Black, white, and gray are neutrals (beiges and browns can also fall into this category depending on how they’re used). Mixing color temperatures in a design—particularly warm and cool—can create dramatic contrast.

For example, this webpage layout features contrasting color temperatures with bright shades of blue and yellow. This helps both the call­-to­-action button and the main image stand out particularly well. Plus, because both of the colors lean in a cooler direction (with a greenish tinge), the combination has a cohesive look even though it’s very high-contrast.

04. Contrast with Color Intensity

The intensity of a color is also known as saturation. A color in its purest, brightest form is 100% saturated; the closer it approaches to gray, the more desaturated it is. Using bright or muted colors (either by themselves or together) can be a strategic way to create places of high or low contrast in a design. Bright colors always attract attention, especially against black. Use them sparingly to highlight important parts of your design.

This website design does just that, placing saturated, orangey-­red lettering against muted forest green. Not only is this a complementary color scheme (which is already eye­-catching), but it also uses contrasting levels of saturation to enhance the drama.

05. Contrast with Shape: Organic vs. Geometric

Most shapes can be categorized as either geometric (rectangles, triangles, circles, etc.) or organic (fluid, nature­inspired). The angular uniformity of geometric shapes can contrast nicely with the often curving, asymmetrical qualities of organic shapes.

Here, a label design incorporates organic, almost abstract shapes that complement and enhance the straight, clean lines of the typographic choices.

06. Contrast with Shape: Edges & Corners

One more way you can subtly use shape in your design is on the edges and corners of your design elements, whether typography, boxes or buttons, or other features. More rounded shapes often have a softer, casual, or friendly appearance, while sharper shapes look more ordered and crisp. You can contrast these qualities against each other, as the design below does in a very literal way with its typography.

07. Contrast with Texture

Like shape, textures can play off of each other to create contrast when their characteristics are very different from each other: rough vs. smooth, hard vs. soft, raised vs. flat. Unless you’re using a special printing effect or other physical technique, any texture you apply will be purely visual—and between the capabilities offered by various design programs and the free textures and resources you can find online, the possibilities are plentiful.

Here, some gritty texture gives an otherwise clean-­lined logo some vintage character. Textures or distressing are great methods for making a design look a little worn or adding some rustic or vintage/retro qualities.

08. Contrast with Scale & Size

Besides adding visual interest to your design, contrast also helps create relationships between and prioritize different design elements. If every object in your design is roughly the same size, there won’t be much of a hierarchy. How will viewers tell what to look at first, or what’s most important? Effectively using scale is not only important from a practical standpoint, but is also one of the easiest ways to create a dynamic, interesting layout and add drama to a design.

This magazine cover design has a huge photo to emphasize the theme of the issue, but it doesn’t overpower the other design elements. In fact, the size, shape, and color of the typography enhance the photographic focal point.

09. Contrast with Visual Weight

Like scale, visual weight is another way to point at a piece of your design and say, “This part is important!” Visual weight simply refers to the way an element stands out in comparison to the rest of the design—in other words, it’s high­-contrast. The part of your design that has the most visual weight (most likely the focal point) doesn’t necessarily have to be the biggest thing on the page. You can also make something “weighty” or more visible with color, texture, shape or any other characteristic that sets it apart and attracts the eye.

As an example, take a look at this series of postcards to promote the city of Cincinnati’s cultural venues. The architectural illustrations are certainly the biggest element on each card, but the “Enjoy More” tagline draws your eye because it’s the darkest thing on the page.

10. Contrast with Spacing & White Space

While it may be tempting to fill a design with as much information as you can, white (a.k.a. blank or negative) space plays an important role in separating and organizing design elements for a balanced layout. When working with a busy or complex layout, surrounding important elements with some extra blank space (it doesn’t actually have to be white) will draw attention to those places and help them contrast more effectively with the rest of the design.

Notice how effectively this webpage mockup employs a combination of white space and thin dividing lines to organize information. Both columns on the left-­ and right-hand sides of the page are surrounded by a generous amount of space; the product photo even more so to make it the center of attention and attract buyers.

11. Contrast with Compositional Choices

To some extent, every design must juggle the concepts of balance and tension—how do you make your design balanced, but not boring; dynamic, but not chaotic? One way to toe the line between the two (and in the process, achieve some good contrast in your design) is to make good compositional choices. To get a grasp on how to do this, it can help to learn about classic composition techniques used by artists and photographers. Some of these include:

• The Rule of Thirds: Imagine dividing your layout into thirds, both vertically and horizontally. Place your focal point on one of the four points where those imaginary lines would intersect. This is about achieving a dynamic layout; there’s no quicker way to a boring design then placing everything smack dab in the middle of the page.

In the first header image of the following website design, both the rose and the headline are centered approximately where the upper two intersections of a rule­-of­-thirds grid would be, making for a balanced, engaging composition. Groups of three (another common compositional technique) also appear throughout the page.

• Diagonals: A diagonal or S­-shaped layout can lend some movement to your design, helping direct viewers’ eyes across the page. It’s often more visually interesting than a traditional grid-based design that uses only horizontal and vertical orientation.

12. Contrast with Something Unexpected

The compositional techniques above are effective in part because they’re unexpected. They’re not straight, or not centered—not typical. This element of surprise can be a great way to create contrast in a design. Adding something unexpected—for instance, a bright pop of color in a neutral design—breaks up the sameness or uniformity and keeps viewers interested.

The way the typography interacts with the photography on this landing page is out of the ordinary and gives an otherwise simple, straightforward design a little extra pizzazz.

13. Contrast with Repetition & Patterns

Strategically applying repeating design elements or patterns can create focus or visual interest in a way that’s similar to the compositional techniques just mentioned. Or repeating a visual theme can help give it greater impact in a design.

This graphic designer’s business card design uses a pattern to balance out and frame the typography, which is the focal point. As a nice touch, the pattern reflects the shape of the designer’s personal logo to tie in that branding.

14. Contrast with Position & Orientation

Every design needs some kind of organizational structure: text is aligned in certain ways, elements are assigned to certain positions in the layout, spacing is set. While consistency is key for an orderly design, mixing things up in a purposeful, limited way can add some interesting contrast.

The logo below uses a slanted orientation to help its key piece of typography stand out against the straight, orderly text that surrounds it. Extra contrast is achieved with the pairing of script and sans ­serif type styles.

15. Contrast with Proximity & Separation

Intentionally grouping objects can show that they’re related and help organize your design in a way that makes it easy to navigate. Likewise, separating objects can help divide a design into distinct sections. Contrast can also be achieved with quantity: a single object among groups of multiple objects (or vice­-versa) will certainly stand out.

For a text-­heavy design like a resume, good structure is key. Here, proximity, alignment, and color all combine to make an information-packed page easy to navigate.

16. Contrast with Visual Cues

Studies have shown that people remember 80% of what they see, which is one of the reasons why design can be such a powerful tool. But attention spans can be short, and sometimes viewers need a little nudge in the right direction to know where to focus in your design. That’s where visual cues can come in handy. You might literally point out a design element with an arrow or highlight it by surrounding it with a circle or other shape. Or in blocks of text, that might come in the form of underlining, bullet points, or icons that visualize the concepts being discussed (as below).

17. Contrast with Complex & Simple Features

Designs can mix simple and complex styles or individual features to ramp up contrast. This is another example of using opposites to enhance each other. This idea is used to good effect in the following set of stickers, where ornate floral patterns set off clean and simple typography—the fact that the typography and its surroundings are so different only makes the overall result more dramatic and engaging.

18. Contrast with Font Combinations

Typography is an essential part of most designs, and provides unique opportunities to add contrast. While basically all the methods of adding contrast we’ve already covered here can be applied to typography, there are also some special considerations to be aware of when choosing and applying fonts or creating custom typography for your designs.

Let’s look at some of those with our last three points; first, combining fonts. If you’re using more than one font for a design, making sure your choices contrast sufficiently will be key to a successful design. Fonts need to be visually distinguishable from each other—different enough that you can assign distinct “jobs” to them in your design. One typeface might be for a headline or title, with another for text. But choosing fonts that are too similar can look confusing or like a mistake.

A basic rule of thumb is to choose one serif and one sans serif font. This is often a combination that is complementary, but also has nice contrast. For a more in­-depth look at this process, check out our 10 tips on combining fonts.

The typographic logo below pairs a sans serif with a slab serif font (plus a script) for a perfectly balanced design that depends on its type choices for contrast.

19. Be Cautious When Contrasting with Typography

When combining fonts, you do want contrast, but you don’t want conflict. Two font choices that are wildly different from each other might clash—which, other than if you’re after an intentional style, usually doesn’t look good. Whether typefaces work together or not often comes down to a gut feeling or instinct rather than clear­-cut rules; trust your judgment, take mental note of font combinations you see that work well, and keep practicing—before you know it, combining fonts will seem like second nature.

The infographic below features several different fonts for a fun, eclectic look (which is appropriate for its humorous tone) but none of them are so “loud” that they clash; in fact, they work together nicely for the purposes of this design.

20. Contrasting with Typography Style & Weight

Many fonts come with a variety of options, like light, bold, italic, condensed, extended, or small caps versions. This makes your job a little easier—even if you’re using just one font in your design, these alternatives can organize your text and create contrast between different typographic features. Try adding variations in point size or color for extra contrast.

This design uses light and heavy weights of the same sans serif font for a polished look. A serif font also makes a cameo appearance for extra contrast.

Now that you have some tried­-and­-true ways for adding contrast to your designs, it’s time to take them for a spin. Feel free to share your results or chime in with more contrast-boosting techniques in the comments section below. As always, happy designing!