Contrast is the difference between two colors. Balance is how those differences are spread across a room, canvas or page. Together they decide whether something is easy to read, easy to look at and pleasant to live with.
Some of this can be measured. The WCAG contrast ratio gives a number for how readable one color is on another. Other parts, like how heavy a color feels, are judgments. We separate the two below so you know when to trust a number and when to trust your eye.
Three kinds of contrast
Colors can differ in three ways, and you can use them separately or together.
| Type | What differs | Example | Best at |
|---|---|---|---|
| Value contrast | Light versus dark | Navy on cream | Readability, shapes, focal points |
| Hue contrast | Position on the wheel | Blue beside orange | Energy, variety |
| Saturation contrast | Vivid versus muted | Bright coral beside dusty gray | Emphasis, sophistication |
Value contrast is the strongest of the three. If you only fix one thing, fix that. Hue contrast without value contrast, like a mid-red next to a mid-green, can look washed out or even shimmer in a way that tires the eyes.
Saturation contrast is the subtle one. A vivid teal cushion on a dusty gray-green sofa stands out without any change in hue family, because only the intensity differs. Designers lean on this when they want a quiet, grown-up look: mostly muted colors, with one clean, saturated note.
Value contrast in practice
Squint at your project or take a black-and-white photo of it. If the shapes still show up, your value contrast is working. If they melt together, change the lightness of one color, even if the hues are very different.
A palette like this one (#1D3557, #457B9D, #A8DADC, #F1FAEE) has a clear value ladder, so any two steps three apart will separate well, while neighbors in the ladder blend softly. Use the large gaps for text and outlines, and the small gaps for gentle shading.
Measuring contrast with WCAG
The Web Content Accessibility Guidelines (WCAG) define a contrast ratio from 1:1 (no difference) to 21:1 (black on white). The calculation compares the relative luminance of two colors, which is derived from their RGB values. It is objective, and it is the standard for web text.
| Pairing | Approx. ratio | Passes AA body text (4.5:1)? |
|---|---|---|
| Black #000000 on white #FFFFFF | 21:1 | Yes |
| Gray #767676 on white | 4.5:1 | Just barely |
| Blue #0000FF on white | 8.6:1 | Yes |
| Red #FF0000 on white | 4.0:1 | No (passes for large text) |
| Green #00FF00 on white | 1.4:1 | No |
| Yellow #FFFF00 on white | 1.1:1 | No |
| Black on yellow #FFFF00 | 19.6:1 | Yes |
The common targets are 4.5:1 for normal text, 3:1 for large text and interface parts such as buttons, and 7:1 for the stricter AAA level. These numbers are for screens, but they are a handy check for printed signs, labels and wall art with lettering. Pasting two hex codes into any free contrast checker will give you the ratio in seconds.
Visual weight
Visual weight is how strongly an element pulls your attention. It is subjective, but common patterns hold up well in practice. In our experience, these tend to feel heavier:
- Darker colors over lighter ones
- More saturated colors over muted ones
- Warm colors over cool ones of the same lightness
- Larger areas over smaller ones
- Colors against a high-contrast background
A small patch of intense red can balance a much larger area of pale gray-blue. Think of it like a seesaw: a small heavy item far from the middle can balance a big light one near it.
Balance and proportion
Balance does not mean symmetry. A symmetrical layout repeats colors on both sides and feels formal and calm. An asymmetrical one uses unequal pieces of equal weight and feels more relaxed and modern.
Proportion is the amount of each color. Equal amounts of two strong colors can compete. Unequal amounts, such as the 60-30-10 idea in the harmony guide, let one color lead. Repeating an accent color two or three times across a space, say a rust pillow, a rust vase and a rust stripe in a rug, also ties a room together.
Here a large pale area (#F1FAEE), a medium cool band (#A8DADC) and a small red accent (#E63946) show proportion at work.
A quick way to check your own project
- Take a photo and convert it to grayscale. Do the important shapes still read?
- Check any lettering with two hex codes and a contrast checker. Aim for 4.5:1 or better on small text.
- Step back across the room. What does your eye land on first? Is that what you meant it to be?
- Find the heaviest spot. Is there something on the other side with comparable weight?
- Count your accents. If they appear only once, repeat them somewhere else.
If you need to calm a high-contrast pair, move one color toward gray or toward the other's lightness rather than changing the hue entirely.
Contrast has a job, so give it one
Not every edge in a design needs strong contrast. Pick one or two places where you want the eye to land, such as a title, a front door or a single vase, and put your strongest contrast there. Let everything else step down: mid-level contrast for supporting pieces, and low contrast for backgrounds.
Think of a well-set dinner table. The plates are plain, the napkins are a soft tone, and one bold centerpiece takes the spotlight. If every item shouted at the same volume, you would not know where to look first. The same applies to a wall of paint, a stack of fabric or a page of lettering.
One caution about the numbers: the WCAG ratio tells you whether text is legible, not whether a design is good. A palette can pass every check and still feel dull, and a charming palette can fail one. Use the number as a floor for reading and your eye as the judge of mood.
When to use it
- When text on a sign, card, label or poster is hard to read.
- When a design looks flat and nothing stands out.
- When a room feels lopsided and you cannot say why.
- When picking a color for a focal point such as a front door, accent chair or title on a canvas.
- When you want accessible color choices for a website, handout or printed material.
Common mistakes
Relying on hue difference alone
Red text on a green background has very different hues but similar lightness, so it can be hard to read. Add a clear value gap.
Light gray text on white
Pale gray looks elegant but often falls under 4.5:1. Check the ratio and darken until it passes.
Putting all the weight on one side
A dark, saturated wall with only light, quiet furniture on the other side tips the room. Add a matching weight across from it.
Using every accent only once
A single orange object looks accidental. Repeat the accent two or three times in different sizes.
Recommended combinations
Editorial suggestion These palettes are starting points we like. Open one in the tools to adjust it or check its contrast.
Ink and paper
Dark navy on a near-white gives very high contrast, roughly 12:1 by our calculation. Great for lettering and labels.
Open in Palette Builder CompareSoft value ladder
Four teal-gray steps with even jumps. Good for layered paper art and tonal wall stripes.
Open in Palette Builder CompareQuiet room, loud accent
Muted neutrals with one rose-red accent. Place the accent in two or three spots for balance.
Open in Palette Builder CompareDark and bright
Black, white and a golden yellow. Black on the yellow reads very clearly, which makes it a good sign palette.
Open in Palette Builder ComparePractical DIY applications
- Grayscale paint chip test. Photograph your paint chips on the wall in grayscale. Pick pairs with a visible gap for trim and wall, and pairs with a small gap for a tone-on-tone look.
- Letter a sign that reads. Check the two hex codes you plan to use for lettering and background, aiming for at least 4.5:1. Then paint a small test board and view it from across the room.
- Balance a gallery wall. Lay out frames on the floor first. Spread dark or saturated pieces across the arrangement instead of clustering them, so no corner feels heavier.
- Add a repeated accent. Choose one accent color for a room and repeat it in three items of different sizes, such as a cushion, a candle holder and a small print. Step back and adjust if one feels louder than the others.
Try it with the tools
Use the Palette Builder to generate schemes from any color, or Color Compare to check how two colors work together.
Projects to try
Fix a Clashing Room
Calm a room with too many colors by editing, repeating, and using the 60-30-10 rule.
Geometric Wall Mural
Painter's tape, four paint colors, and one weekend turn a blank wall into a bold geometric mural.
Hand-Colored Color-Coded Planner
Give every part of your life its own color so your planner pages can be read in a glance.
Questions people ask
What contrast ratio should I aim for?
For normal text, WCAG asks for at least 4.5:1, and for large text and interface parts at least 3:1. Higher is easier to read, especially in dim light or for people with low vision.
Is high contrast always better?
No. High contrast is best for text and focal points. Large areas of strong contrast can feel harsh, so use softer steps for backgrounds and big surfaces.
Can I use the WCAG ratio for paint?
It was designed for screens, but it is still a useful rough guide for printed lettering and signs. Test a real sample too, because paint finish and room lighting change how colors read.