Color Contrast Examples to Learn From

Key takeaways

• Aim for a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text to meet WCAG AA.
• Test contrast on real devices and in bright light, since a ratio that looks fine on a calibrated monitor can fail in the field.
• Do not rely on color alone to convey meaning. Pair it with text, icons, or underlines so colorblind users are not excluded.
• Study color contrast examples with their measured ratios so you learn to spot a failing pairing before a tool confirms it.

What a contrast ratio measures

Contrast ratio is a number describing the difference in brightness between two colors, running from 1 to 1 for identical colors up to 21 to 1 for pure black on pure white. The Web Content Accessibility Guidelines set thresholds using this number, and hitting them is what separates readable text from text that strains or excludes people.

The reason to study color contrast examples alongside their measured ratios is that the eye is a poor judge on its own. Two grays can look clearly different to a designer and still fall below the passing threshold for someone with low vision or on a cheap screen. Learning the ratios attached to real pairings builds an instinct the naked eye lacks. Once you know that a certain gray on white measures 3 to 1, you can recognize it as failing body text without opening a checker.

The WCAG thresholds you have to hit

The guidelines give clear numbers, and the examples that pass all respect them. For AA, the common target, normal-size text needs at least 4.5 to 1 against its background, and large text, roughly 18 point or 14 point bold, needs at least 3 to 1. For the stricter AAA level, those rise to 7 to 1 and 4.5 to 1. Interface elements and meaningful graphics need at least 3 to 1.

Memorize 4.5 and 3 as your working floors. Most color contrast examples that fail do so on body text that lands somewhere between 3 and 4.5, which looks almost fine and quietly excludes readers. When you evaluate a palette, check the smallest and lightest text first, since that is where designs slip below the line most often. Passing on headings while failing on body copy is one of the most common patterns there is.

Example: readable body text versus trendy gray

The most frequent failure in modern web design is fashionably light body text. A pale gray on white, often chosen because it looks soft and elegant, regularly measures around 2.5 to 3.5 to 1, below the 4.5 needed for normal text. It passes the designer’s eye and fails a real user squinting on a bus.

The fixed version darkens the text until it clears 4.5 to 1, which is usually a smaller change than designers fear and rarely ruins the aesthetic. Compare the two side by side and the accessible version reads more easily for everyone, not only those with low vision. This is the color contrast example worth internalizing first, because low-contrast body text is the single most widespread accessibility mistake on the web and one of the simplest to correct.

Example: buttons and calls to action

Buttons carry two contrast requirements at once, and examples often nail one while missing the other. The text on the button must contrast with the button color at 4.5 to 1 for normal text, and the button itself must contrast with the page background at 3 to 1 so its boundary is visible. A pale button on a white page can have perfectly readable text and still fail because the button edge disappears.

Study color contrast examples of primary buttons and you will see both checks respected: dark text on a bright fill, or white text on a sufficiently deep color, sitting on a background it clearly stands apart from. A frequent trap is a light-colored ghost button whose outline and label both sit too close to the background. If a user cannot tell a button is a button, the prettiest color choice in the world has failed its job.

Example: never rely on color alone

Contrast is not only about brightness ratios, it is also about not depending on hue to carry meaning. Around one in twelve men has some form of color vision deficiency, so a red-versus-green signal with no other cue is invisible to them. The examples that get this right always add a second channel. Common fixes that appear across accessible interfaces include:

• Error fields marked with an icon and text, not only a red border
• Links distinguished by an underline, not only a different color
• Chart series labeled directly or patterned, not only color-coded
• Status indicators paired with a shape or word alongside the color

These color contrast examples show that accessible design treats color as one signal among several, never the sole one. Ask of any colored meaning in your interface whether it still communicates in grayscale. If the answer is no, it needs a second cue before it ships.

Example: dark mode and inverted palettes

Dark mode introduces its own contrast traps, and examples that work in light mode can break when inverted. Pure white text on a pure black background often measures too high, producing a harsh halation effect that tires the eyes. The examples that read comfortably tend to use an off-white text on a near-black gray rather than absolute black, keeping a strong ratio without the glare.

The lesson is that contrast has a comfortable range, not only a floor. Enough contrast to pass WCAG, but not so much that fine text vibrates against its background. When you build both themes, run your color contrast examples through a checker in each mode separately, because a pairing that passes in one can fail or overshoot in the other. Dark mode is not only light mode with the colors flipped, and treating it that way produces predictable problems.

Example: text over images and gradients

Placing text over a photo or gradient is where contrast fails unpredictably, because the background changes underneath the text. A caption that reads clearly over the dark part of an image can vanish over the bright part. Static contrast checkers struggle here since there is no single background color to measure against.

The examples that handle this add a controlling layer: a semi-transparent overlay, a solid text panel, or a gradient scrim behind the text that guarantees a consistent contrast regardless of the image below. Study color contrast examples of hero sections with text over photography and you will almost always find one of these techniques quietly doing the work. Never trust that a given photo will stay dark enough behind your text, since the same layout will eventually carry an image that breaks the assumption.

Building contrast into your workflow

Contrast is cheapest to fix during design and expensive to retrofit after launch. Bake it into your process by checking every text and background pairing as you build your palette, not after. Keep a contrast checker open, define accessible color tokens once, and reuse them so passing ratios are the default rather than a per-screen effort.

If you want an accessibility audit of your existing interface or a palette built to pass from the start, our team handles both as part of design work. Explore our web design guides for related tactics on accessible interfaces. Work through these color contrast examples until the ratios feel familiar, and you will catch failing pairings by eye long before they reach a real user who cannot read them.

More web design & development guides