How to Use Contrast in Design: Visual Hierarchy and WCAG Contrast Ratios

What is contrast in design?

Contrast in design is the deliberate difference between elements on a page: light against dark, large against small, bold against thin, busy against empty. That difference tells the eye where to look first, pushes key information forward and keeps text readable. On the web, it is also a measurable accessibility requirement defined by WCAG contrast ratios.

I have worked on web projects since 2012, and when a layout "feels messy", the diagnosis is usually the same. Either everything shouts at the same volume, or everything whispers. In this guide I look at contrast from two angles. First, visual hierarchy, meaning how a design guides the reader. Second, the measurable ratios that the W3C defines. If you want the emotional side of color, read my article on color psychology in web design; here the focus is on difference itself.

Why does contrast matter so much on a web page?

Visitors rarely read a page from top to bottom. They scan first. In practice, what stops the eye during that scan is difference. When the headline is clearly larger than the body copy, the button stands apart from its surroundings and the price is easy to spot, a reader understands the offer within seconds.

When contrast is weak, three problems tend to arrive together:

• Readability drops: light gray text almost disappears on a phone in sunlight.
• Priority vanishes: every element carries the same weight, so the reader has no idea what to click.
• Accessibility suffers: people with low vision, color vision deficiency or aging eyes lose access to the content.

So contrast is not decoration; it carries the message. It also signals care. A pricing table that nobody can read costs trust, however good the product behind it may be.

Who is most affected by low contrast?

Teams often treat contrast as a niche concern. In reality the affected group is much larger than most people assume. People with low vision, color vision deficiency or cataracts come to mind first. However, the list does not stop there.

• Older users: the aging eye needs more light and sharper differences.
• Mobile users: anyone reading outdoors, in direct sunlight or at low screen brightness.
• People on cheap screens: budget monitors and older phones wash colors out.
• Tired or hurried readers: someone reading at the end of a long day is a temporarily limited user too.

In other words, contrast in design is not a favor to a minority. Almost everyone needs it at some point. That framing also helps when a client says "a bit paler would look more elegant", because the conversation moves from taste to the real conditions your visitors face.

How do you build visual hierarchy with contrast?

Visual hierarchy means arranging information by importance. Contrast, therefore, is the main tool for that ordering. To push an element forward, you make it different from its surroundings. To keep it in the background, you make it similar.

In practice I think about every page in three layers:

1. Layer one: the core message and the primary action. The highest contrast belongs here.
2. Layer two: supporting headings, subheadings and short descriptions.
3. Layer three: helper text, footnotes and metadata. Lower contrast, but still clearly readable.

That last point matters. A quiet layer does not have to be an illegible one. Many designers fade secondary text so far that it falls below the accessibility threshold. Instead of building hierarchy with light gray alone, combine size, weight and spacing. That way you keep the ratio intact and still make the order obvious.

A simple test helps here. Step back from the screen or squint. If the first thing you notice is still the core message, the hierarchy works.

What are the main types of contrast?

Most people think of contrast as black versus white. In fact, designers have a much wider toolbox:

• Value (lightness) contrast: the difference between light and dark tones. It drives readability more than anything else.
• Hue contrast: different colors side by side, such as blue and orange.
• Size contrast: the ratio between a large headline and small body text.
• Weight contrast: bold versus light font weights.
• Shape contrast: a rounded button among square cards, for example.
• Space contrast: generous white space next to a dense area.
• Motion contrast: one moving element on an otherwise static page. Powerful, as long as you use it sparingly.

You should combine these types rather than treat them separately. For example, if a button differs in color, shape and surrounding space, even a user with weak color perception will notice it. Also, pushing one type to the extreme does not replace the others; balance is the real job.

Picture a product page in an online store. The product name is large and bold, the price is dark and prominent, and the add to cart button is the only filled, saturated element on the screen. Shipping details and return terms sit in a smaller but still readable gray. With that setup, the reader sees the product, then the price, then the button, without any instructions. That is exactly what contrast in design achieves when you layer the types in the right order.

What is the difference between color contrast and value contrast?

This distinction causes more confusion than any other. Two colors can look completely different and still produce unreadable text if their lightness values are close. Green text on red is the classic example: opposite hues, similar lightness. On top of that, red and green are exactly the pair that the most common form of color vision deficiency struggles with.

The WCAG formula also works with relative luminance, not hue. Put simply, it asks how light or dark a color is, not how vivid it looks. That is why a bright yellow on white scores very low, no matter how loud it seems to your eye.

My advice: when you review a palette, convert the design to grayscale once. If two elements blend together in gray, they blend together for many real users too. This quick check moves color choices from feeling to something you can measure. To look up HEX and RGB values, you can use our HTML color codes tool.

What is the WCAG contrast ratio and how do you calculate it?

The WCAG contrast ratio expresses the luminance difference between a foreground and a background color as a single number. According to the W3C definition, the formula is (L1 + 0.05) / (L2 + 0.05). L1 stands for the relative luminance of the lighter color and L2 for the darker one.

The result ranges from 1:1 to 21:1. Two identical colors give 1:1, while pure black on pure white gives the maximum of 21:1. One detail matters here: the W3C states that you must not round the computed value. For instance, 4.499:1 does not meet the 4.5:1 threshold.

Some concrete examples on a white background:

• #767676 gray reaches about 4.54:1 and passes the normal text threshold.
• #777777 reaches about 4.48:1 and falls just below it.
• #595959 reaches about 7:1 and meets the strictest level.

As you can see, two grays you can barely tell apart give different results against the standard. Therefore you should judge contrast by measurement, not by eye. You do not need to calculate it by hand; enter two colors into our color contrast checker and you get the ratio and the levels it passes instantly.

Another common mistake: teams check the main copy and skip the small details. Cookie banner text, helper text under form fields, the "VAT included" note next to a price and footer links all follow the same rule. These small texts are usually the palest and smallest on the page, so they fail most often. Add them to your checklist explicitly.

Which contrast ratios does text need?

WCAG 2.2 defines text contrast at two levels. Level AA is the baseline that most regulations and corporate policies reference. Level AAA is stricter and works as an ideal target. The table below follows the official W3C Understanding 1.4.3 Contrast (Minimum) page and the related criteria:

People often misread the "large text" definition. The W3C notes that 18 pt and 14 pt bold roughly equal 24 px and 18.5 px on screen. So for normal 16 px body copy, you should always aim for 4.5:1. For the wider accessibility picture, see my guide to web accessibility and WCAG standards.

How much contrast do buttons, icons and form fields need?

The requirement does not stop at text. Success Criterion 1.4.11 Non-text Contrast, introduced in WCAG 2.1 and kept in 2.2, asks for 3:1 against adjacent colors for interface components and meaningful graphics. It covers:

• Form field borders, when users need them to find the field.
• Checkboxes, toggles and selected state indicators.
• Keyboard focus indicators.
• Icons that carry meaning on their own, such as a phone or search icon.
• Chart lines and segments needed to understand the data.

The mistake I see most often is a pale gray input border on a white background. Users cannot tell where the field starts, and filling in the form becomes harder. Likewise, removing the browser's default focus ring and replacing it with a faint shadow leaves keyboard users stranded.

On the other hand, inactive components are exempt. Still, if a disabled button looks too faded, users may not understand why it does not respond. A short explanatory line next to it solves that. For conversion-focused button design, also read my article with CTA button examples.

Why is it a problem to convey information with color alone?

WCAG Success Criterion 1.4.1 Use of Color says color must not be the only visual means of conveying information. The reason is simple: a person with color vision deficiency, or someone using a grayscale display, cannot see a difference that depends on hue alone.

Typical examples, for instance, include:

• Marking an invalid form field only with a red border.
• Removing the underline from inline links so that only color sets them apart.
• Separating chart series by color only.
• Showing stock status only with a green or red dot.

The fix is to add a second cue. You write the error message as text, keep an underline or weight change on links, and use patterns or direct labels in charts. That way color supports the information instead of carrying it alone. This rule is separate from the contrast ratio, but in practice you should handle both together, because both protect the same users.

What are the most common contrast in design mistakes?

In the sites I audit, the same mistakes keep coming back. Most of them come from a wish to look "clean", not from carelessness:

1. Light gray body text: picking tones like #999 for a modern look. On white, that value scores about 2.85:1, far below the threshold.
2. Placeholders instead of labels: the faint sample text disappears as soon as the user types, and its contrast is low anyway.
3. Text directly on photos: white text over a bright part of the image simply vanishes.
4. Brand color buttons with white labels: white text on a light turquoise button, for example.
5. Emphasizing everything: five bright colors and three primary buttons on one screen. In the end nothing stands out.
6. Forgetting hover and focus states: nobody tests whether contrast drops when the state changes.

The last point deserves attention. In the design file everything looks flawless, yet on the live site the button label can merge with its background on hover. So you should check in the browser, not only in the design tool. For a structured review, follow the steps in my UX audit guide.

How should you use contrast in typography?

Typography lets you create strong contrast without touching color at all. The size ratio between headline and body text makes scanning easier. For instance, a main headline between 36 and 44 px against 16 px body text creates a clear difference without shouting.

Weight, likewise, does the same job. A bold subheading stands out above a regular paragraph on its own. That said, watch out for light and thin weights. A thin font covers very few pixels per letter, so reading gets harder even when the ratio technically passes.

Pairing two typefaces is a contrast decision as well. A serif display font next to a sans serif body font creates separation and reinforces hierarchy. However, if you choose two fonts that look almost alike, the difference reads neither as contrast nor as harmony; it just feels messy. I cover these pairings in detail in my article on how to choose web typography.

How do you create contrast with space and layout?

Above all, white space is the cheapest and most underused contrast tool. When you leave generous space around one element on a busy page, it stands out without any color change. That is why luxury brands show few products and lots of empty space.

Layout also follows the same logic. If most of the page aligns left, one centered block draws attention. If cards share the same size, one larger card becomes the focal point. In short, contrast means setting up a pattern and then breaking it on purpose at one point.

One warning, though: breaking the pattern works once. If every section invents its own exception, readers never learn the rule, and the exception stops being special. So build a calm system and save emphasis for the few places that truly matter. I explain how to build such a system in my article on minimalist web design.

What should you do if your brand colors have low contrast?

This is the situation I meet most often in corporate projects. The primary brand color might be a light green, orange or yellow that fails 4.5:1 with white text. Changing the logo is rarely an option, and logo text is exempt anyway. However, buttons and text in the interface are not.

Specifically, these are the fixes I use:

• Derive a darker variant: use a deeper shade of the same hue. The eye still recognizes the family, and the ratio goes up.
• Flip the text color: dark navy or black text on a light button instead of white.
• Move color to surfaces: apply the brand color to large areas, icons and dividers rather than to text.

These decisions are much easier at the start, during the brand identity stage. When my team and I define a palette in a brand identity project, we map every color's ratio against white and dark backgrounds from day one. As a result, nobody has to argue later that "this color does not work" on the website.

How should you handle contrast in design for dark mode?

Dark mode, however, is more than inverting the light theme. Pure white on pure black gives the maximum 21:1, but for long reading that harsh difference can tire some readers. Many design systems therefore prefer a dark gray surface. For example, Google's Material Design guidance recommends #121212 as the dark theme surface color.

Keep these points in mind:

• A brand color that passes in the light theme may look too dark on a dark background. Measure both themes separately.
• Shadows almost disappear on dark surfaces. Separate layers with lightness differences instead.
• Faded secondary text gets even weaker in dark mode; keep it at 4.5:1 or higher.

In short, two themes mean two palettes. Do not ship either one without testing it on its own background. On our own site we defined light and dark colors separately, and our accessibility statement explains how we support user contrast preferences.

How do you keep text readable on top of images?

A headline over a large hero photo looks impressive at first. However, a photo never has a single color. Part of the text may land on a dark area and part of it on a bright sky. In that case the ratio changes from letter to letter.

Reliable techniques include:

1. Semi-transparent overlay: a dark, see-through layer over the photo.
2. Text box: placing the headline inside a solid panel.
3. Gradient: a transition that darkens on the side where the text sits.
4. Composition choice: picking a photo with a calm, single-tone area where the text goes.

When you measure, use the lightest point behind the text as your reference, because the worst spot sets the limit for readability. Also, images crop differently on mobile. A layout that looks safe on desktop can push the text onto a bright area on a phone, so check both views separately.

Can there be too much contrast in design?

Yes, there can. Contrast in design is a balance, and too much of it also breaks communication. If every element has high contrast, the eye finds no place to rest and the page feels tiring and aggressive. Moreover, when everything looks important, nothing stands out.

That is why it helps to separate two ideas. The first is readability contrast: the ratio between text and its background. Raising it is almost always good, and you should never drop below the minimum. The second is emphasis contrast: the difference in importance between elements. That one you should use sparingly and on purpose.

As a rule of thumb, I recommend one primary action per screen, no more than two accent colors and a limited number of heading levels. On a service page, for example, the "Request a quote" button should be the highest contrast element, while secondary links use a calmer style. Then readers understand what matters without being told.

How do you test contrast step by step?

Rather than running a contrast check once and forgetting it, make it a fixed step in your design process. This is the order I follow:

1. Put the palette in a table: measure every text and background pair. Note which pairs only work for large text.
2. Measure components: check the 3:1 ratio for buttons, form fields, checkboxes and focus indicators against their surroundings.
3. Test states: look at hover, focus, selected, error and disabled states one by one.
4. Grayscale check: convert the page to grayscale and confirm that the hierarchy survives.
5. Automated scan: accessibility audits in tools like Lighthouse list contrast failures for you.
6. Real device: try a phone outdoors at low brightness.

Automated tools do not catch everything. For instance, they often cannot measure text over images or gradient backgrounds correctly. So you need manual checks on top of the scan. For single color pairs, the color contrast checker is the fastest route; to check the language side of your copy, the readability checker helps as well.

One more reminder: every palette change calls for a new measurement. A new banner color for a campaign or a fresh product badge can quietly break the balance you built. That is why I treat contrast in design as ongoing maintenance, not a one-off project.

How does contrast in design affect conversions and SEO?

Let me be clear first: Google has not said that it uses color contrast as a direct ranking signal. So the idea "I fixed my contrast, now my rankings will rise" is not realistic. However, the indirect effects are real, and they matter.

On a page people cannot read, visitors leave before they find what they came for. A user who never notices the button never reaches the quote form. These behaviors hit your conversion rate directly. In addition, the Lighthouse accessibility score includes contrast failures, which gives you a concrete quality indicator.

The legal side keeps growing too. In the European Union, for example, the European Accessibility Act has applied to certain digital services since 28 June 2025. For businesses selling into the EU, WCAG conformance is therefore turning from good practice into an obligation. In short, contrast is a decision that touches users, conversions and legal risk at the same time.

How do my team and I handle contrast on a website?

When we start a web design project, we do not treat contrast as a detail to fix at the end. On the day we set the palette, we measure every color pair and define rules for where each pair may appear. As a result, there are no surprises as the design grows.

Next, we build the hierarchy. For each page we define one primary action and give it the highest contrast. We separate secondary elements through size and space rather than color. This approach calms the page and lowers the risk of falling below accessibility thresholds.

Finally, we test in the live environment: different devices, dark mode, keyboard navigation and automated scans. If you are unsure about your own site, start by measuring your colors with the tool. If several pairs fall below the threshold, get in touch and we can look at the structure together.