Color Vibration
A shimmering or buzzing effect at the boundary between two highly saturated colors of similar lightness, caused by the visual system's inability to form a stable edge.
What it means
When two saturated, complementary colors of nearly equal lightness sit side by side, the border between them appears to shimmer, pulse, or vibrate. This happens because the eye's edge-detection system relies primarily on luminance (lightness) contrast, not chromatic contrast. When two colors differ dramatically in hue but barely in lightness, the visual system receives a strong chromatic signal but a weak luminance signal — and it can't resolve the boundary cleanly.
The effect is strongest with complementary pairs: red/cyan, blue/orange, magenta/green. It's weaker with analogous colors because adjacent hues create less chromatic conflict. Reducing saturation, increasing the lightness gap, or inserting a thin neutral border between the colors eliminates the vibration.
Why it matters in palette design
Color vibration is one of the most common readability killers in data visualization and UI design. Charts with saturated color-coded series, buttons on vivid backgrounds, and decorative gradients with equal-lightness stops can all trigger it. The fix is simple: ensure sufficient lightness contrast between any two adjacent saturated colors. PerfectPalette's contrast checker catches these cases by evaluating luminance ratios, not just WCAG compliance.
Common confusion
Color vibration vs. chromostereopsis: Both cause discomfort at color boundaries, but vibration is a 2D edge instability (the boundary shimmers) while chromostereopsis is a 3D depth illusion (one color appears closer). Vibration occurs between any saturated complementary pair at equal lightness; chromostereopsis is specific to red–blue wavelength extremes. A red-cyan pairing can trigger vibration without chromostereopsis.
Example
A bar chart uses saturated red (#FF0000) bars against a saturated cyan (#00FFFF) background. Both colors have similar luminance, so the bar edges visibly shimmer. Desaturating the cyan to a muted teal (#5FA8A8) introduces a lightness gap that calms the boundary and makes the chart readable.
Learn more
Apply this to your palette
Open PerfectPalette and put these concepts into practice with your own colors.