Minimo Digital
Minimo Digital

Color Palette & Contrast

Compute contrast ratios and generate palettes with CSS variables.

WCAG Contrast Checker

Palette Generator

How to Use Color Tools?

WCAG Contrast Checker:

  1. Select foreground and background colors using the color pickers or enter hex values.
  2. Click Check to see the contrast ratio and WCAG compliance (AA/AAA).

Palette Generator:

  1. Upload an image file.
  2. Set the number of colors to extract (4-12).
  3. Click Generate Palette to extract dominant colors.
  4. View color swatches, CSS variables, and JSON output.

Frequently Asked Questions

What is WCAG contrast ratio?

WCAG (Web Content Accessibility Guidelines) contrast ratio measures the luminance difference between text and background colors. A ratio of 4.5:1 is required for normal text (AA standard), and 7:1 for enhanced accessibility (AAA standard).

What contrast ratio do I need to pass accessibility checks?

WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). WCAG AAA requires 7:1 for normal text and 4.5:1 for large text. Most accessibility audits and legal requirements target AA compliance.

How do I fix failing contrast ratios?

Darken text on light backgrounds or lighten text on dark backgrounds. Avoid medium grays on white or light-colored text on saturated backgrounds. Use this tool to test color combinations until you find one that passes.

Does the tool check my entire color palette?

Yes. Enter multiple colors and the tool generates a contrast matrix showing all foreground/background combinations and whether each passes WCAG AA and AAA standards.