Value and Visual Contrast
On this page
You choose a gray on a white background, then place it in a dark composition. Suddenly, it looks brighter. The color value has not changed. What has?
How a color looks also depends on the colors around it. This is a useful observation habit to develop early when learning to draw, choose colors, or compose a picture.
This is the first lesson in Visual Foundations. You do not need drawing skills or formulas. By the end of the lesson and exercises, you should be able to distinguish “the same color values” from “the same appearance,” and try changing a background to give a shape a different role in a composition.
Look first: which gray square looks brighter?
Start with what you see. There is no need to guess the answer the lesson expects. Look at the original image, cover the backgrounds to compare again, then swap them.
Both squares always use the same gray: RGB(128,128,128). Initially, A has a dark background and B has a light one; A usually looks brighter. Covering the backgrounds places both squares on the same light gray. Swapping the backgrounds changes only their surroundings.
A common impression is that the square on the dark background looks brighter, while the one on the light background looks darker. Yet both squares use the same fill throughout. Their surroundings are what change.
This phenomenon is called simultaneous brightness contrast: the light and dark areas surrounding a region affect how bright that region looks within the same image. “Simultaneous” means they are present together. You do not need to stare for a long time or look at another image first to produce an afterimage. Examples and comparisons
Covering the backgrounds is a useful check. The squares keep their positions, sizes, and values while their surroundings become the same gray. You can compare two conditions—different backgrounds and matching backgrounds—and see the evidence for yourself.
If the difference is subtle, do not force yourself to see it. Viewing distance, image size, surroundings, and display conditions can affect the experience. The strength of the effect you see is not a measure of whether you have done the exercise correctly.
Separate the color values from the visual impression
These are two different questions:
| What are you asking? | How can you check? | What happens here? |
|---|---|---|
| Do the two colors have the same values? | Inspect the fills or sample both areas in the same screenshot. | Yes. Both are RGB(128, 128, 128). |
| Do the two colors look equally bright? | Compare them against their current backgrounds. | They may not. The one on the dark background usually looks brighter. |
RGB is one way to specify screen colors numerically. Equal values in all three channels give us the grays used here. 128 is a value in the 0–255 encoding range; #808080 is another way to write this gray. It does not mean half the physical luminance or a sensation of being halfway bright. When this lesson calls the grays “the same,” it means their graphical fills use identical color values. We are not measuring how much light your display actually emits.
In drawing and painting, light–dark relationships concern questions such as: Is this area lighter or darker than its neighbor? Is the difference large or small? Understanding that relationship is often more useful than asking for the exact gray of an isolated patch.
Why do the surroundings matter?
The visual system processes differences between neighboring regions and organizes local information within the larger image. Your experience of brightness is not a separate numerical readout for every pixel.
A useful working habit is: look at the patch and its relationship to its surroundings. This does not mean that your eyes simply subtract a background value from a target value. That subtraction can describe part of the difference in an image, but it cannot directly calculate a person's visual experience.
For the classic contrast effect shown here, experimental research supports an important role for early visual processing. It would therefore be misleading to explain everything as “the brain thinks the left side is in shadow, so it guesses that the square is brighter.” Our display contains no depicted shadow, yet the difference can still appear. Sinha et al., 2020: research on simultaneous brightness contrast
This introductory experiment lets you observe how surroundings affect appearance. On its own, it cannot establish all the underlying neural mechanisms. Nor does it establish a universal rule that darker surroundings always make a target look brighter: more complex stripes, boundaries, and groupings can produce effects in different directions. Comparing simultaneous contrast and the Munker–White effect
Use it: make the same vase a light or dark shape
The next picture contains just a vase silhouette and a background. The vase always uses the same gray. There are no added highlights, cast shadows, or textures.
Try this task: keep the vase unchanged and turn it from a dark shape on a light background into a light shape on a dark background. As you move the slider, watch for a point where its outline almost disappears.
The vase always uses RGB(128,128,128). The slider changes only the uniform background. Below 128, the vase is lighter than its background; above 128, it is darker. At 128, the fills match and the outline disappears. This is a flat composition exercise, with no lighting or material simulation.
Two related changes are worth distinguishing:
- The vase has a different light–dark role. It is darker than its surroundings on a light background and lighter than its surroundings on a dark one. This is first of all an actual relationship between the target and background values.
- The vase may look different too. Although its fill stays the same, it may appear brighter or darker against different backgrounds, as in the earlier experiment.
When both vase and background are 128, the outline disappears because there is no color difference across the boundary. No illusion is needed to explain that result.
The diagram below keeps the three relationships available for comparison. The central shape always has the same fill; only its background changes.
This gives you a practical option when drawing or painting: to make a subject look brighter, try adjusting the surrounding areas as well as the subject itself. Judge the result within the whole composition. Strong contrast serves some intentions; gentle differences between similar values serve others. More contrast is not automatically better.
Worked example: make a cabin readable before adding details
The experiments explain local background relationships. Now consider a practical drawing problem: you have a sky, mountains, a cabin and grass, but the image becomes an indistinct patch when reduced. Adding more roof tiles will rarely solve that problem.
A: diagnose before darkening everything. Sky, mountain, ground and cabin have similar grays, with small marks scattered throughout. The cabin lacks a clear difference from its surroundings. More drawing has not produced more clarity. A postage-stamp thumbnail makes the problem easier to see.
B: organize three large value groups. This version uses a light sky, middle-value mountain and darker ground, with the cabin against a distinguishable neighboring region. A group may contain several grays: small variations within it should support the larger distinction between groups. Grass can have texture without each blade competing with the house.
C: choose where the strongest contrast belongs. For a lit window at dusk, darken the building and retain a small bright window. Its size is modest, but its adjacent wall is dark. If the purpose is to describe the building, B may be more useful: C sacrifices wall detail. The intention determines the trade-off.
Use two viewing scales. From a distance, check whether the large groups remain clear. Up close, compare the two sides of a particular boundary. A histogram showing black and white cannot replace either check: rearranging the same quantities of gray produces a different picture.
High key, low key and contrast describe different things
High key usually means that much of the picture occupies a lighter value range; low key places much of it in a darker range. Neither excludes the opposite end. A bright snowfield can contain one dark tree, and a night scene can contain a lamp.
Contrast concerns differences. A high-key image can have a very strong dark-tree contrast, while two dark regions in a low-key image may differ only slightly. “High key means no black” and “low key means nothing is visible” are poor working instructions.
| Intention | A starting move | Check afterward |
|---|---|---|
| Light, airy space | Keep large regions light, with a few dark anchors | Can pale subjects still be distinguished? |
| Night or partly concealed space | Keep most areas dark and reserve a few lights | Have important objects merged into one black patch? |
| Clear information hierarchy | Give the key subject a distinct local contrast | Do irrelevant corners have equally strong differences? |
These are strategies to try, not fixed emotional codes. A bright scene can be unsettling, and a dark one peaceful; subject matter, shapes and arrangement also contribute.
A repeatable checking sequence
Name the subject that should be readable. Reduce the image or squint, and describe its three largest regions as light, middle and dark. If they are hard to separate, reorganize them before adding detail. Then find two weak boundaries around the subject and decide whether each should become clearer or intentionally merge. Restore small details last.
This grayscale example organizes a flat picture. It does not simulate illumination; the next lesson explains why real surfaces develop different values.
Read a new image: which sign revision fits?
Keep the gray of OPEN unchanged and make it easier to distinguish from the sign. A is the starting image; B and C are revisions. Which respects that constraint? Could the other work if the letter color were free to change?
Decide first, then reveal the explanation
B darkens only the sign; the letters retain their gray. C darkens the letters, increasing separation but breaking the constraint. Both can improve legibility under different permissions. State the purpose and what must remain fixed before judging a revision.
Try it beyond this lesson
An observation exercise away from the screen
Cut two small pieces from the same sheet of gray paper. Put one on white paper and the other on black paper under similar lighting. Compare their appearance, then move both pieces onto the same background. If you do not have gray paper, duplicate a gray square in a drawing application and place the copies on light and dark backgrounds.
Write just two sentences: “What I kept the same was…” and “What I changed was…”. With paper, also watch for changes in position, reflections, or lighting.
Two questions in new settings
1. Gray lettering from a poster looks too bright when placed on a dark cover. Can you conclude that the design application changed the lettering's color? How would you check?
Show a possible approach
You cannot tell from appearance alone. First check the color values, opacity, and other relevant settings, then compare both versions of the lettering on the same background. If the color values match but the appearance changes with the background, include that relationship in your judgment. Sampling a color helps check its values, but you still need to assess readability against the final background.
2. A medium gray vase almost disappears into a matching gray background. You cannot change the vase's fill. Is darkening the background the only way to reveal its outline?
Show a possible approach
You can make the background darker or lighter, provided the difference becomes visible enough. A darker background makes the vase a light shape; a lighter background makes it a dark shape. The point is to use the relationship between the two areas, rather than memorize “make the background dark” as the only operation.
Now choose a painting, photograph, or poster you like. Pick one area and describe whether it is lighter or darker than its surroundings. Observe how that relationship affects how much it stands out. Describe what you see before deciding whether to change it.
What could you observe next?
This lesson practices comparing light and dark in a flat image. A natural next question is how an object's lit areas, dark areas, and cast shadow help us see its volume. That requires a further distinction between the color of a surface and changes caused by illumination.
Sources and further reading
- Colour Literacy Project: Simultaneous contrast—visual examples of simultaneous contrast and how it differs from other effects of surrounding colors.
- Sinha et al. (2020): Mechanisms underlying simultaneous brightness contrast: Early and innate—experimental research for readers who want to explore the mechanisms further.
The squares, vase, and comparison diagrams were drawn for this lesson. The interactions are for observation and practice, not visual measurement or display calibration.