What are WCAG contrast ratio guidelines?

The Web Content Accessibility Guidelines (WCAG) require a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text to meet level AA standards. For enhanced contrast (level AAA), the ratios are 7:1 for normal text and 4.5:1 for large text.

How does the harmony generator work?

By shifting the Hue angle of your seed color on the 360-degree color wheel, we calculate geometric relationships: Complementary (180° shift), Triadic (three equal 120° spacings), Analogous (neighboring 30° shifts), and more.

Color Palette Generator & Contrast Checker

Generate matching color harmony palettes, export code configurations, and verify Web Content Accessibility Guidelines (WCAG) contrast ratios.

Palette Generator

Export Settings

WCAG Contrast Checker

Text Color

Background Color

Contrast Ratio 4.5:1 PASS

AA Normal Text (4.5:1) PASS

AAA Normal Text (7:1) FAIL

AA Large Text (3:1) PASS

AAA Large Text (4.5:1) PASS

Large Text Preview (18pt / 24px Bold) Small Text Preview (14pt / 16px Regular). The quick brown fox jumps over the lazy dog. Accessibility ensures equal access for everyone.

Frequently Asked Questions

What is WCAG 2.1 contrast compliance?

The Web Content Accessibility Guidelines (WCAG) dictate ratios of contrast to ensure readability. For standard compliance (Level AA), small text requires a minimum ratio of 4.5:1, and large text (18pt+ or 14pt+ bold) requires 3:1. Level AAA is more strict, requiring 7:1 for normal and 4.5:1 for large text.

How is the contrast ratio calculated?

Contrast is calculated based on relative luminance formulas. Luminance maps RGB values into linear light levels reflecting human visual sensitivity to green, red, and blue. The final ratio ranges from 1:1 (no contrast, same color) to 21:1 (perfect contrast, black and white).

What are complementary and analogous colors?

Complementary colors sit directly opposite each other on the color wheel (180° offset), creating maximum visual tension and high contrast. Analogous colors lie adjacent to each other (e.g. 30° offsets), creating smooth, harmonious, and calming palettes.

Can I use these palettes in CSS/SASS?

Yes, we provide instant styling sheets: copy root CSS variables, copy Tailwind CSS extend configs, or extract the raw JSON color array to copy directly into custom configurations. All processing runs 100% locally.