Contrast colors: definition, types, levels and examples

Technically, color contrast is the relationship of luminance Between two colors they seem to be opposite to each other.

Luminance refers to dark or light color. For example, pure white with high light and pure black with low light.

In physics, luminance is defined as a measure of the intensity of bright light coming from a source in one direction or it can also be referred to as the glare of light.

On the other hand, when this term is used in design, color contrast is the difference in the ratio of color values ​​where a higher number indicates a greater degree of contrast between two colors.

For example, black and white have a contrast ratio of 21:1. While white and yellow have a ratio of 1.07:1 which tends to be low.

Ultimately, when used in a variety of designs, labels for example, contrasting colors can enhance the content’s better readability and visibility.

Examples of the most common use of this color concept can be seen from a notebook or perhaps this blog post where there is black text on a white background.

But what is the meaning of contrast colors or contrast colors? What are the different types of colors? Are there examples of color contrast?

If you are interested in the answers to the various basic questions above, check out the article below to the end.

Understand contrast colors

Contrast color is a color scheme that directly shows the difference in value and level between two colors.

In theory, contrast refers to the use of foreground and background colors of different brightness levels.

A simple example is this link, which refers to the concept of color, with the text color blue and the background white.

This is a simple example of such a contrasting color. So, what is this contrasting color used for? What is the job?

Read also:

There are many uses Contrasting colors One of them is to show the main or dominant element of the design.

For example, if you’re building a website, designing contrasting colors allows people to focus on what’s in the foreground rather than what’s in the background.

This is the reason why many websites use a white background because it can be combined with other colors, like blue and yellow for example.

The use of these contrasting colors will indirectly affect the readability of the content or text from the human side, not the device.

This is also very useful for users with eye problems or users who are color blind.

The level of contrast between one color varies quite well with another, either in the color husk or in the intensity of the color displayed.

There are some simple examples of these contrasting colors for example, red and green which are high contrast colors or red orange which is low contrast color.

contrasting colors

Image via

in this book color elements Written by Johannes Itten in 1961, it divides contrasting colors into several types, including:

1. Hue contrast color

Hue contrast color refers to the pure contrast color with the highest brightness or brightness level.

Examples of these contrasting colors include yellow, red, blue, red, blue, green, blue, yellow, purple, yellow, green, purple, red including purple, green, blue, orange, and black.

It’s just that, in order to create a contrast of hue, three different colors are needed. This means that the degree of contrast will only appear when three colors are used.

2. Dark light contrast

Light and dark contrast refers to the chromatic properties of colors that create or create opposite effects to each other.

A simple example of light and dark contrast is putting black and white side by side.

3. Cold-warm contrast

Cool-warm contrast refers to the characteristics of color that depict or indicate a warm or cool atmosphere.

For example, by combining red which is a warm color or warm colors with blue which is a cool color or a cool color.

In addition to the two colors above, there are many examples of warm and cool colors such as yellow and orange as well as green, neutral white, gray and silver

4. Complementary contrast

Complementary contrast occurs only when two colors are said to be complementary, provided that the pigments are mixed together in equal amounts.

Eventually, the two colors will produce a new neutral color, in this case gray or black.

For example, yellow, purple, blue, orange, red and green produce different contrasts.

5. Simultaneous contrast

Simultaneous contrast occurs when each given color visualizes a complementary color that automatically produces a color that did not exist before.

6. Contrast saturation

Saturation contrast refers to saturation or quality, which relates to the degree of purity of the color itself.

In practice, this saturation contrast results in several parts, namely pure color contrast, intense contrast, softened contrast, and faded contrast.

7. Contrast extension

Span contrast refers to the sharing of relative color areas of two or more colors, of different intensities, whether small or large.

color contrast level

When we talk about contrast, we are not talking about level which can refer to color and value.

But in general, levels are only divided into two categories even if you use one of the contrasting color types above, including:

1. High contrast

high contrast Or high contrast is the use of colors opposite to each other in the interior color wheel or color wheel.

An example of high contrast is the use of two primary colors, red and green, or perhaps green and yellow.

So, does high contrast also apply to primary and secondary colors? In general yes, but the level of luminance is different.

How about combining primary and secondary colors? Does it include high contrast?

In theory no. Because the resulting level is already different. And secondary colors are basically children of the same primary colors.

2. Low contrast

Low contrast or low contrast is the use of two colors that are close to each other on the color wheel.

Thus, the contrast level of the same color will be as low as when using red and orange.

Thus, in the context of low contrast, the use of one primary color and one secondary color can be indicated.

So does using a secondary and a tertiary color also produce low contrast? In general yes.


Contrasting colors are one of the many solutions that can be used when choosing the right color for a design or branding.

Because basically, this one color will create and form a certain emotional response if chosen correctly.

This is an article about the meaning of contrasting colors, including their types and levels. We hope this article was useful to you. ***

Leave a Comment