Skip to main content
NeatUtility

Color Palette Generator & Contrast Checker

Color & CSS100% Client-Side
Ready
TEXT
0 lines0 chars
0 B / 9.8 KB
About this tool, examples & FAQ

Generate harmonious color schemes (analogous, complementary, triadic, monochromatic) and audit WCAG 2.1 AA and AAA accessibility contrast ratios in real time.

Key facts

Verified capabilities and limits of this utility
Generated harmoniesMonochromatic tint/shade scale, complementary, analogous, and triadic
WCAG evaluationAudits contrast against white, black, or custom backgrounds against AA and AAA thresholds
Text scale supportEvaluates compliance for both normal body text and large headings (>=18pt)
Export formatsReadable audit report, CSS custom variables (:root), or structured JSON
Max input size10 KB
Execution deadline2 s
Processing locationBrowser-only: palette math and contrast audits run locally in your browser

How to use

  1. Enter a base color (e.g. #3B82F6) in the primary color input slot.
  2. Optionally enter a background or comparison color in the secondary slot.
  3. Select your target WCAG level (AA standard or AAA enhanced).
  4. Choose between Normal Body Text or Large Text / Headers.
  5. Select your desired export style: Overview Table, CSS Variables, or JSON Model.
  6. Click 'Run' or press Ctrl+Enter to inspect the generated harmonies and contrast audit.

Example

Generate blue palette and audit contrast

Input

#3B82F6
(empty input)

Example output

=== COLOR PALETTES & HARMONIES ===
Base Color:    #3B82F6
Complementary: #F6AF3B
Analogous:     #3BDFF6  #3B82F6  #523BF6
Triadic:       #3B82F6  #F63B82  #82F63B
Monochromatic: #021431 #06327A #0B64F4 #6DA2F8 #B6D0FC #E7EFFE

=== WCAG 2.1 CONTRAST AUDIT (AA - Normal Text, Min 4.5:1) ===
• On White (#FFFFFF): 3.68:1 -> FAIL ✗ (AA: Fail, AAA: Fail)
• On Black (#000000): 5.71:1 -> PASS ✓ (AA: Pass, AAA: Fail)

Edge cases

Low-contrast warnings

Colors with contrast ratios below 4.5:1 for normal text or 3.0:1 for large text fail WCAG Level AA and trigger explicit visual failure flags.

Custom comparison background

Passing a secondary background color immediately computes the exact contrast ratio between the base color and the custom surface.

Cylindrical color wheel boundaries

Angle shifts for analogous and triadic schemes properly wrap around the 360-degree boundary.

How it works

  1. Parses the base color into RGB channel values and derives HSL coordinates.
  2. Calculates geometric harmony offsets on the 360° color wheel: complementary (180°), analogous (±30°), and triadic (120° intervals).
  3. Generates a 6-step monochromatic lightness scale from deep shades to bright tints.
  4. Calculates WCAG 2.1 relative luminance for the base color, pure white (#FFFFFF), pure black (#000000), and any optional background color.
  5. Computes contrast ratios using (L1 + 0.05) / (L2 + 0.05) and compares against Level AA and AAA thresholds.

Related workflows

Frequently asked questions

What contrast ratio is needed to pass WCAG 2.1?

For Level AA, standard body text requires a minimum contrast ratio of 4.5:1, while large text (18pt / 24px or 14pt bold) requires 3:1. For Level AAA, normal text requires 7:1 and large text requires 4.5:1.

What are analogous colors?

Analogous colors sit adjacent to each other on the color wheel (typically separated by 30 degrees). They create calm, comfortable, and unified visual palettes.

Is my design palette sent to a server?

No. All contrast audits and color calculations run locally in your browser using isolated Web Workers.

References