What is the minimum contrast ratio for normal text?

WCAG 2.2 requires a 4.5:1 contrast ratio for normal-sized text and 3:1 for large text (18pt or 14pt bold) and UI components. These ratios are computed from relative luminance, not perceptual brightness.

Can pastel colors ever be accessible?

Yes, when the text is dark enough. A pastel background like #F7F3EF with dark ink #232A35 easily passes 4.5:1. The failure comes from pale text on pastel backgrounds, which rarely reaches even 3:1.

Is a high contrast ratio enough for color-blind users?

No. Contrast helps people with low vision, but color blindness is about distinguishing hues. You must also avoid relying on color alone by adding icons, patterns, shapes, or text labels to every meaning conveyed with color.

Creating Accessible Color Combinations: The Complete WCAG Guide

Accessible color combinations are the difference between a website anyone can use and one that quietly excludes a huge share of its audience. Roughly 1 in 12 men and 1 in 200 women have some form of color vision deficiency, and millions more have low vision, cataracts, or simply read in bright sunlight. When you choose colors without checking how they work together, you are deciding who gets to read your content. This guide walks through the full process of creating accessible color combinations, from contrast math to real-world testing.

What Makes a Color Combination Accessible

A color combination is accessible when every piece of information it conveys is also available through contrast, shape, pattern, or text. That has two parts. The first is contrast: text and interactive elements must be dark enough relative to their background that people with low vision can read them. The second is redundancy: you must never rely on color alone to communicate meaning, because that meaning is invisible to people with color blindness.

The Web Content Accessibility Guidelines (WCAG) define the technical baseline. WCAG 2.2 sets three contrast thresholds that govern most web design:

4.5:1 for normal-sized text (under 18pt, or under 14pt bold)
3:1 for large text (18pt+ or 14pt+ bold)
3:1 for UI components and graphical objects, including icons, button boundaries, and form input borders

These ratios are computed with a formula that weights how the human eye actually perceives color. Green, for instance, contributes more to perceived brightness than blue, so a mid-green background can still pass with dark text where a mid-blue fails.

The Contrast Math That Matters

The WCAG contrast ratio is calculated from the relative luminance of two colors. Luminance is a number between 0 (black) and 1 (white), computed from the sRGB channels. The ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 the darker. A few worked examples make this concrete:

Black (#000000) on white (#FFFFFF): ratio 21:1. Maximum possible contrast.
Dark gray (#595959) on white (#FFFFFF): ratio 7:1. Comfortably passes AAA.
Light gray (#767676) on white (#FFFFFF): ratio 4.5:1. Passes AA exactly.
Mid gray (#9E9E9E) on white (#FFFFFF): ratio 2.8:1. Fails even large-text requirements.
White (#FFFFFF) on bright yellow (#FFEB3B): ratio 1.6:1. Barely visible and a common design mistake.

The pattern to internalize: pastel and mid-tone backgrounds force you to use near-black text, while very light backgrounds give you more room. This is why so many accessible sites use very dark ink on very light paper rather than mid-tone color on mid-tone color.

Building an Accessible Palette From Scratch

Start from the top down. Choose your lightest background and your darkest text first, and verify that pair. Only then add accent colors, checking each accent against both the background it sits on and any text that overlays it. A practical workflow:

Pick a neutral background like #FFFFFF or #FAFAFA.
Pick ink text like #1A1A1A or #232A35 and verify 4.5:1 minimum.
Add a primary accent for links and buttons, and verify every text-over-accent and accent-over-background pair.
Add a secondary accent only if it passes 3:1 against its surroundings for non-text uses.
Run every final pair through a contrast checker before you style anything in production.

The Classic Accessible Combinations

Some combinations reliably pass and scale across brands:

Dark navy (#14213D) on off-white (#FDFBF7): roughly 13:1. Deeply readable, works for headlines and body.
Forest green (#1B4332) on cream (#F5F0E6): roughly 9:1. Calm and natural, common in wellness and finance.
Charcoal (#333333) on soft gray (#F0F0F0): roughly 12:1. Neutral and safe for data-dense dashboards.
Dark plum (#3D0E29) on pale lavender (#EDE7F6): roughly 11:1. Creative without sacrificing readability.
White text on royal blue (#2B4C9B): roughly 6:1. Passes AA for both normal and large text, a reliable button color.

Notice what these have in common: the text color sits near the extremes of lightness, never in the muddy middle.

Accent Colors and Non-Text Contrast

Links, button outlines, form borders, and focus indicators all need a 3:1 contrast ratio against adjacent colors, even when they carry no text. A common failure: a light gray input border (#D0D0D0) on a white page. That border fails 3:1, so users with low vision cannot see where the field is. Fixes include darkening the border to around #767676, adding a visible label, or giving the field a filled background tint.

Focus indicators deserve special attention. Many designers remove the default focus ring for aesthetics, then ship a site that keyboard users cannot navigate. An accessible focus ring is a high-contrast outline, typically 2-3px, using a color that passes 3:1 against every background it appears on. When in doubt, use black or white with an offset outline.

Color Combinations and Color Blindness

Contrast is only half the story. Two colors can pass every ratio test and still be indistinguishable to someone with deuteranopia (red-green deficiency), the most common form. This is why accessibility guidance insists that color never be the sole carrier of meaning. Practical rules:

Do not signal errors only with red. Add an icon, bold text, or a label such as "Required."
Do not distinguish chart categories only by hue. Use different fill patterns, marker shapes, or direct labels.
Do not encode status only with green/red. Add a symbol and text, for example a checkmark and the word "Active."
Prefer blue over red for links. Blue is the hue least affected by the most common color vision deficiencies, which is one reason web convention settled on blue links.

Testing Your Combinations

Every contrast claim should be verified with a tool rather than eyeballed. Free options include:

WebAIM Contrast Checker: the classic tool, enter two hex codes and get the ratio plus pass/fail for AA and AAA at both text sizes.
Contrast Checker Chrome extensions: check colors directly on a live page and audit whole sections at once.
Simulators: tools like Stark, NoCoffee, or the Chrome DevTools rendering emulation let you view your site through deuteranopia, protanopia, and tritanopia filters.
Automated audits: axe DevTools and Lighthouse flag contrast failures across an entire site in one run.

Run these during design, not after launch. Contrast problems found in QA require re-theming; contrast problems found at the palette stage are a two-minute fix.

Common Mistakes to Avoid

Gray on gray: gray text on gray backgrounds fails constantly because both colors sit near the middle of the luminance scale.
White on pastel: white text on any tinted background almost always fails 4.5:1. Use dark text instead.
Color-only status: using only color to show success, errors, or required fields excludes color-blind users regardless of contrast.
Brand color rigidity: a brand color that fails as a text color can still be used for large decorative elements. Accessibility applies to text and UI, not to every decorative pixel.
Testing once: contrast must be re-checked whenever a color changes, including dark mode variants.

Testing Color Combinations Under Real Conditions

Laboratory contrast testing misses real-world conditions that significantly affect color accessibility. Screen glare from overhead lighting can reduce perceived contrast by 30 to 50 percent, turning a passing contrast ratio into a failing one in bright office environments. Low-quality monitors with poor color reproduction shift hues and reduce saturation, potentially making color-coded information indistinguishable. The practical testing protocol should include checking your color combinations on at least three devices: a calibrated reference monitor, a standard laptop screen, and a budget phone. Viewing your design in bright ambient light and in a dark room reveals contrast failures that automated tools miss. For physical products and printed materials, always test under the lighting conditions where the product will be used: a sign viewed under fluorescent office light requires different contrast levels than one viewed under natural daylight.

The Takeaway

Accessible color combinations are not a constraint that limits design; they are a specification that guarantees your work reaches the widest possible audience. Start with the background and text pair, verify every accent against a 3:1 threshold, never let color carry meaning alone, and test with real tools. Follow those rules and your color combinations will pass WCAG, survive color-blind simulation, and keep your content readable for everyone who lands on your page.