WCAG color contrast is measured on a 1:1 to 21:1 luminance scale, where 4.5:1 clears AA for normal text, 7:1 clears AAA, and 3:1 handles large text and UI elements. The ratio is a property of the color pair, not of which color is foreground, so the math is symmetric: swap text and background and the score stays the same. Behind those numbers is a specific formula from the Web Content Accessibility Guidelines (W3C) that converts each sRGB channel into linear light using the weights 0.2126 for red, 0.7152 for green, and 0.0722 for blue, then compares the relative luminance of the lighter and darker colors. The result is (L1+0.05)/(L2+0.05), and that single value is what every accessibility standard is built on. Designers searching for color contrast checker palette ideas usually want three things at once: a starting palette that already passes, a way to verify their own custom pairs, and a clear sense of which threshold applies to which text size. The sections below give all three: the official thresholds, a way to test any pair with the Color Contrast Checker, and a list of ready-to-use palette ideas you can adapt to your own brand.
Why palette ideas need a contrast check before they ship
Roughly one in twelve men and one in two hundred women live with some form of color vision deficiency, and millions more read with low vision, cataracts, or on cheap screens in bright sunlight. For those readers, the difference between "looks fine on a 27-inch monitor in a dim office" and "passes a contrast checker" is the difference between usable and unreadable body copy. A palette that looks bold in a moodboard can quietly fall below the 4.5:1 line the moment a light gray is swapped in for pure white, and the failure often hides in secondary text, placeholder copy, and disabled states where designers are least likely to test by eye.
Contrast is also a legal requirement in most jurisdictions. In the United States, the Americans with Disabilities Act is routinely applied to websites, Section 508 governs federal agencies, and the European standard EN 301 549 references WCAG directly for public-sector sites. A palette that fails the standard is a palette that can fail an audit, regardless of how visually striking it looks. Treating contrast as a design constraint, not a finishing step, is the cheapest way to keep both readers and compliance officers happy.
The thresholds every palette has to clear
Before borrowing any palette idea, it helps to know the exact numbers a checker will compare your colors against. WCAG 2.x defines the scale once and reuses it everywhere, so these values are stable across tools and standards.
| Use case | Level AA | Level AAA |
|---|---|---|
| Normal text (under 18pt regular or 14pt bold) | 4.5:1 | 7:1 |
| Large text (18pt+ regular, or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components, icons, graphical objects | 3:1 | 3:1 |
AA is the legal floor in most places. AAA is the bar you aim for when you want comfortable reading for the widest possible audience, including older readers and anyone with reduced contrast sensitivity. Large, bold text is allowed a lower ratio because thicker strokes are easier to read; that is why the same color pair can pass for a 24px headline and fail for 14px body copy. A non-text rule of 3:1 also applies to form field borders, focus indicators, and icons that need to stand out from the page without relying on color alone. Every threshold in this table is the one the Color Contrast Checker reports, so a pass in the tool is a pass against the standard.
How to test any palette pair
This is the part that turns a moodboard into a working system. With the Color Contrast Checker open, validating a palette idea is a three-step loop you can run on any pair of colors.
- Set the foreground (text) color using the color picker or by typing a hex value like #111111.
- Set the background color the same way, for example #ffffff.
- Read the contrast ratio and the AA/AAA pass or fail badges, and adjust either color until it meets the level you need.
Run the loop once for your primary text, once for muted or secondary text, and once for any large headlines that use a different combination. The tool reports pass or fail for every threshold at once, so you do not have to remember the numbers — you just have to read the badges. If a palette idea is close but not quite there, nudge the foreground a little darker or the background a little lighter; a small shift in lightness usually closes a 0.2-point gap far faster than swapping the hue. The same loop works for UI elements: feed the checker the form border color and the page background, then confirm the 3:1 non-text rule clears. For a deeper walkthrough of the same workflow, the practical guide on checking color contrast for accessibility covers the edge cases.
Palette ideas that hold up under testing
The palette ideas below are starting points, not finished systems. Each one names a foreground and a background you can paste straight into the Color Contrast Checker to see the exact ratio. Treat the list as a sketchpad: take a pairing, confirm it passes for your text size, and then build a wider system around it.
| Palette idea | Foreground | Background | Best for |
|---|---|---|---|
| Classic monochrome | #000000 | #FFFFFF | Body copy on a clean reading surface; the 21:1 ceiling. |
| Charcoal on warm white | #1F2937 | #FAF7F2 | Long-form articles and editorial layouts that need softness without sacrificing AA. |
| Navy on near-white | #0F172A | #F8FAFC | Brand-led marketing pages where a deep blue carries the identity. |
| Deep plum on cream | #3B0764 | #FEF3C7 | Magazine-style accents, badges, and pull quotes that need to feel rich. |
| Forest green on ivory | #14532D | #FFFBEB | Sustainability or finance brands that want color without sacrificing legibility. |
| Burgundy on sand | #7C2D12 | #FEF3C7 | Restaurant and hospitality palettes with warm, food-friendly tones. |
| Slate blue on light gray | #1E3A8A | #F1F5F9 | Dashboards and data-heavy interfaces where hierarchy has to read at a glance. |
| Near-black on off-white | #111827 | #F9FAFB | A softer alternative to pure black-and-white that still hits AAA for body text. |
The exact ratios for each pairing are not listed here on purpose: the whole point of a contrast checker is that it computes the official number from the official formula, and the tool is where you get that verified result. Open any of these pairs in the checker, read the pass or fail badges, and you have the verified answer. Once a base pair passes, use the same foreground with a few different surface colors to build a layered system: page background, card background, muted surface, and so on.
How the checker actually arrives at the ratio
For readers who want to know why a palette idea passes or fails, the formula is short enough to walk through once. Each sRGB channel is first normalized to a 0–1 value, then linearized: if the value is at or below 0.04045, it is divided by 12.92; otherwise it is transformed with ((v+0.055)/1.055)^2.4. The three linearized channels are then weighted by 0.2126 for red, 0.7152 for green, and 0.0722 for blue to produce a single relative luminance for each color. The contrast ratio is the lighter luminance plus 0.05, divided by the darker luminance plus 0.05, which is why identical colors produce 1:1 and pure black on pure white produces 21:1.
A worked example makes that concrete. Take mid-gray #777777, where each channel is 119/255 ≈ 0.4667. Linearizing with ((0.4667+0.055)/1.055)^2.4 gives approximately 0.184 for every channel, so the weighted luminance is 0.2126×0.184 + 0.7152×0.184 + 0.0722×0.184 ≈ 0.184. Pair that with pure white #FFFFFF, whose luminance is 1.0, and the ratio is (1.0+0.05)/(0.184+0.05) = 1.05/0.234 ≈ 4.49:1. That is the kind of result that explains why a "looks fine" mid-gray on white so often fails AA for body copy by a hair. The full algorithm is documented in the W3C's Contrast (Minimum) understanding page, and the Color Contrast Checker applies it line-for-line.
Tips for building your own accessible palettes
A good accessible palette is built from the foreground down, not the background up. Pick the text color first — usually a deep neutral or a saturated brand color — then choose a background that clears the 4.5:1 or 7:1 bar against it, rather than starting from a moodboard and hoping the text works on top. Designers often keep a "neutrals" track of three or four grays that each pass against a chosen background, which gives them body, secondary, and disabled text without re-checking every step.
It also helps to remember what the contrast ratio does not cover. It measures luminance, not hue, which means a bright red on a bright green can fail even though the colors look distinct to viewers without color vision deficiency. That is why relying on color alone to convey meaning — say, an error state shown only by turning a field red — is discouraged; pair the color with an icon, label, or underline. Gradients, semi-transparent overlays, and text on images are trickier because the effective background shifts across the element, so the safest practice is to test against the lightest and darkest point a letter might sit on. Placeholder text, disabled states, and thin decorative fonts are the usual failure spots, and a quick pass through the Color Contrast Checker catches them before they ship. The whole thing runs locally in your browser, so you can test brand palettes and design tokens privately without uploading anything. Beginners who want a gentler on-ramp can follow the same logic in the Color Contrast Checker for Beginners walkthrough.
What a contrast checker does not catch
Even a perfect ratio can fail a real reader. The checker only measures luminance contrast, so it cannot tell you whether two colors that pass AA still look "off" together because of cultural or brand associations, or whether a bright accent clashes with the rest of the system. It also does not model color blindness directly; the WCAG formula was deliberately written around luminance precisely because it is the strongest predictor of legibility across all forms of color vision deficiency, but a checker will not flag a palette that relies on red-versus-green alone to communicate state. Layer other signals — labels, icons, patterns, underlines — on top of color so the design still works for someone who cannot distinguish the hues.
Finally, contrast is a floor, not a ceiling. Passing AA means the text is technically legible; passing AAA means the text is comfortable to read for long stretches. For body copy, help text, and anything a reader is likely to skim, aim as close to 7:1 as you can. For decorative type, oversized headlines, and large UI labels, 3:1 is a reasonable target. The Color Contrast Checker reports every threshold at once, so the same palette can be checked against every use case in a single pass.