Color Contrast Checker & Harmony Generator

Why color contrast matters

Color contrast decides whether people can actually read your interface. Low contrast text may look elegant on the designer's calibrated monitor, but it becomes unreadable in sunlight, on cheap screens, or for the roughly one in twelve men and one in two hundred women with a color-vision deficiency. Getting contrast right is one of the highest-impact, lowest-effort accessibility wins there is.

The Web Content Accessibility Guidelines (WCAG) express contrast as a ratio between the relative luminance of two colors, ranging from 1:1 (no contrast – identical colors) to 21:1 (pure black on pure white). The tool above calculates this ratio for every pair of colors in your palette using the exact WCAG 2.1 formula.

WCAG contrast levels explained

• AA – normal text: at least 4.5:1. This is the baseline most accessibility laws and audits require for body copy.
• AA – large text: at least 3:1. "Large" means roughly 24 px, or 19 px when bold.
• AAA – normal text: at least 7:1. The enhanced level, recommended where legibility is critical.
• AAA – large text: at least 4.5:1.
• Non-text (UI & graphics): interactive controls and meaningful graphics should reach at least 3:1 against their surroundings.

Rule of thumb: aim for AA everywhere, and treat AAA as the target for long-form reading and small text.

Understanding color harmonies

A harmony is a set of colors whose hues sit in a predictable relationship on the color wheel. Harmonies give a palette a sense of intent instead of looking random. The generator above builds five classic types:

• Complementary – two hues directly opposite each other (180° apart). Maximum contrast; great for call-to-action accents.
• Analogous – neighbouring hues (±30°). Calm and cohesive, common in nature.
• Triadic – three hues evenly spaced by 120°. Vibrant yet balanced.
• Tetradic – four hues forming a rectangle on the wheel. Rich, but needs one dominant color.
• Monochromatic – a single hue at different lightness levels. Elegant and easy to keep accessible.

Harmony makes a palette look good; contrast makes it work. That is why this tool combines both – generate a scheme you like, then immediately verify that the text and background pairs you intend to use actually pass WCAG.

How to use this tool

1. Start from the default palette or pick a base color and apply a harmony.
2. Fine-tune any swatch with the color picker or by typing a hex value.
3. Read the matrix: green-ish cells pass AA for normal text, amber pass only for large text, red fail.
4. Click any hex code to copy it to your clipboard.

FAQ