Is Spectrum free to use?

Yes, Spectrum is completely free. There are no paid plans, no trial periods, and no features locked behind a paywall. All 7 tools are free for everyone, forever.

Do I need to create an account?

No account is needed. Open the site and start using any tool immediately. Your color history is saved to your browser locally, not to a server.

Are my images uploaded to a server?

No. Images are processed entirely in your browser using the HTML Canvas API. Your files never leave your device and are never sent to any server.

How do I extract colors from an image?

Upload an image (drag & drop, URL, or paste), then click anywhere on it to pick the color at that pixel. The color appears instantly in HEX, RGB, HSL, and more formats.

What is WCAG contrast ratio and why does it matter?

WCAG contrast ratio measures how different two colors look against each other. A ratio of at least 4.5:1 is required for normal text (AA level) to be readable by people with low vision. Spectrum's contrast checker tests your color pairs against all WCAG 2.1 levels.

What is color blindness and how common is it?

Color blindness (color vision deficiency) is a reduced ability to distinguish certain colors. About 8% of men and 0.5% of women are color blind in some way. The most common types are red-green (protanopia, deuteranopia) and blue-yellow (tritanopia). Spectrum simulates 7 types of color vision.

What are complementary colors?

Complementary colors sit directly opposite each other on the color wheel — red and green, blue and orange, yellow and purple. Placed side by side, they create the highest possible contrast and make each color appear more vivid.

What color formats does Spectrum support?

Spectrum supports HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, LAB, LCH, XYZ, YUV, YCbCr, HSI, and several technical formats like integer, binary, and Base64. You can copy any format with a single click.

Accessibility Tool

Contrast Checker

Verify WCAG 2.1 accessibility compliance for any color pair.

Quick Presets:

Colors

Enter foreground and background

Foreground (Text)

Background

CSS Code

.element {
  color: #000000;
  background-color: #ffffff;
}

Contrast Analysis

WCAG 2.1 compliance

Contrast Ratio

21.00:1

AAA

Excellent contrast

Live Preview

Heading Text

The quick brown fox jumps over the lazy dog. This sample text helps you visualize how your color combination will appear in real content.

Size Comparison

12px (Small)

Sample

14px (Body)

Sample

16px (Body)

Sample

18px (Large)

Sample

14px Bold

Sample

24px (Heading)

Sample

WCAG Compliance

AA Normal Text

Standard body text

≥ 4.5:1

AA Large Text

18pt+ or 14pt bold

≥ 3:1

AA UI Components

Buttons, inputs, icons

≥ 3:1

AAA Normal Text

Enhanced accessibility

≥ 7:1

AAA Large Text

Enhanced large text

≥ 4.5:1

Understanding WCAG Contrast

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with moderately low vision.

Text Sizes

Normal text: Under 18pt or under 14pt bold
Large text: 18pt+ or 14pt+ bold

WCAG Levels

Level AA: Minimum acceptable contrast
Level AAA: Enhanced, recommended