Short answer
It depends on what 'apart' has to survive. For WCAG, parts that must be distinguished need a 3:1 luminance ratio where 1.4.11 applies; perceptually, two colours can look very different with almost no luminance difference and fail that test, or pass it and still be confused under colour-vision deficiency. Use luminance contrast for robustness, check perceptual difference under simulation, and add a separator line or gap wherever two meaningful colours touch.
WCAG's contrast ratio measures only luminance: how much lighter one colour is than the other. A perceptual colour difference such as CIEDE2000 measures the whole difference, including hue and chroma. The two often disagree. The table compares six pairs of the kind that meet in stacked bars, segmented controls and maps. Blue against purple or teal against green have large perceptual differences while their contrast ratio stays well under 3:1 — barely above 1:1 for red against brown — because they are close in lightness. Pale yellow on white is the opposite failure in miniature: a small but visible hue difference with almost no luminance difference. For someone who sees hue normally, the perceptual measure predicts what they notice; for someone in bright light, on a poor screen or with reduced colour vision, the luminance measure predicts what survives.
WCAG deliberately bases its contrast criteria on luminance alone. The W3C's rationale is that colour-vision deficiencies change which hues people can distinguish but do not reduce light–dark contrast perception, so a luminance threshold protects everyone at once. Simulated deuteranopia in the table shows the consequence: the blue–purple pair, whose difference rests largely on the red–green axis, shrinks from about 38 to about 14 ΔE00, while pairs that differ in luminance, such as the two greys or navy on black, keep all of their separation. This is why the robust design move is to separate adjacent meaningful colours in lightness first and then choose hues, rather than choosing distinct hues and hoping they are distinct enough.
When two regions touch directly, the visual system has to find the boundary from the colour change alone, and small differences blur together, especially for people with low vision or when the regions are thin. A separator — a one- or two-pixel white or dark line, or a small gap — gives the eye an edge that does not depend on the two colours at all. For stacked bars, pie segments, treemaps and maps, a thin line in the background colour between parts is often the single most effective fix, and it lets adjacent fills be closer in colour than would otherwise be safe. The separator itself then becomes the component boundary that WCAG's non-text contrast applies to, and a white gap on a white page is invisible, so choose its colour to contrast with the fills.
Not every adjacent colour needs to be distinguishable. Subtle surface differences — a card a few percent lighter than the page, zebra striping in a table, a hover tint — are decorative or supplementary, and WCAG does not require them to meet a ratio. Problems arise when a subtle difference is asked to carry meaning: a selected row shown only by a slightly darker stripe, a map where the difference between two classes is the finding, a calendar where booked and free days are two close greens. The test is whether a user who misses the difference also misses information. If yes, the difference needs to be strong in luminance, reinforced by a separator or a second cue, or both.
| Pair | WCAG contrast | ΔE00 typical | ΔE00 deuteranopia (simulated) |
|---|---|---|---|
| Blue / purple segments (#1E88E5, #8E24AA) | 1.91:1 | 38.2 | 14.4 |
| Teal / green regions (#00897B, #43A047) | 1.30:1 | 20.3 | 27.8 |
| Red / brown bars (#E53935, #8D6E63) | 1.09:1 | 21.0 | 17.3 |
| Pale yellow on white (#FFF59D, #FFFFFF) | 1.11:1 | 22.5 | 22.9 |
| Navy on black (#1A237E, #000000) | 1.58:1 | 28.6 | 28.7 |
| Mid grey / light grey (#9E9E9E, #E0E0E0) | 2.02:1 | 17.2 | 17.2 |
Why: Adjacent fills are close in lightness and touch directly.
Fix: Add a thin separator in the background colour and separate fills in lightness.
Why: Selection is a slightly darker stripe, similar to zebra striping.
Fix: Add a strong border or check icon for selection.
Why: The highlight differs from white in hue but hardly in luminance.
Fix: Use a darker highlight or an outline.
Each statement is labelled by kind — established fact, a standard’s requirement, observed market data, a convention, or Colourwise’s own interpretation or analysis — with the strength of the evidence behind it.
StandardStrong evidence
The W3C explains that WCAG bases contrast on luminance rather than hue because colour-vision deficiencies affect which hues can be distinguished but do not reduce light–dark contrast perception.
Source: Understanding Success Criterion 1.4.3: Contrast (Minimum) (WCAG 2.2)
Colourwise analysisStrong evidence
Several colour pairs with large CIEDE2000 differences, such as blue against purple and teal against green, have WCAG contrast ratios well below 3:1 (about 1.3–1.9:1) with each other.
Based on: Computed by Colourwise with the WCAG 2.2 contrast formula and CIEDE2000; see the table.
Source: Web Content Accessibility Guidelines (WCAG) 2.2; CIE (International Commission on Illumination) publications
Colourwise interpretationLimited evidence
Adding a thin separator line or gap between adjacent colour fills gives a boundary that does not depend on the fills' difference, allowing closer fill colours to remain distinguishable.
Based on: Colourwise's reading of the role of edges in segmenting regions and of the W3C's treatment of boundaries as the visual information that identifies components under 1.4.11.
Caveat: Not a measured threshold; separators must themselves contrast with the fills to help.
Reviewed 29 September 2026. Colourwise summarises its sources in its own words and does not reproduce standards text or proprietary colour data. Spotted an error? Tell us.