UUUP Tools

Design Tools

Color Contrast Checker — WCAG AA/AAA

Calculate foreground/background contrast with WCAG 2.0 rules and check AA/AAA for normal and large text. Useful for accessible palettes and frontend readability review.

Quick switch→Color Converter
ContrastWCAGAccessibility
Quick switch:Color ConverterBatch Contrast CheckerColor Harmonizer

Favorite this tool

No favorite storage mode has been selected.

Quick actions

Back to Design Tools Browse all tools

Copy this tool URL or open the system share sheet on a supported device.

Use cases

  • Check body and button text readability
  • Verify a design draft against WCAG
  • Tune brand colors until AA or AAA passes

How to use

  1. Set foreground and background (picker or HEX)
  2. Review the contrast ratio and AA/AAA results
  3. Swap colors if needed, then copy the contrast result

Example input and output

Input

Foreground #000000 / Background #ffffff

Output

Contrast 21:1, AA/AAA pass

FAQ

What is the difference between AA and AAA?

AA requires at least 4.5:1 for normal text and 3:1 for large text. AAA is stricter: 7:1 for normal text and 4.5:1 for large text.

Which color inputs are supported?

Calculation uses HEX values. Use the picker or paste #RRGGBB.

Tools

Related tools

Continue with another translated tool for a nearby task.

Color Converter

Color Converter — HEX, RGB, HSL Online

Available

Convert colors among HEX, RGB, HSL, HWB, CMYK, and CSS variables in your browser. Includes a color picker and random color helper for design handoff, stylesheet work, and brand-color alignment.

Color HEX RGB
Open tool

Batch Contrast Checker

Batch Contrast Checker — Multi-Pair WCAG Checks

Available

Check WCAG contrast for many foreground/background pairs at once. See AA/AAA levels and text previews—useful for design-system audits, brand-color batches, and accessibility reviews.

Contrast WCAG Accessibility
Open tool

Color Harmonizer

Color Harmonizer — Classic Harmony Rules

Available

Pick a base color and generate schemes with complementary, analogous, triadic, tetradic, split-complementary, or monochromatic rules. Preview UI usage and export CSS variables for brand and component work.

Palette Color Harmony
Open tool