PaletteDesk
Elements

Preview your color palette on real UI components

Buttons, inputs, badges and alerts in every key state, painted with your palette - with a live WCAG contrast check on every pairing.

A plain component lab - no page context, just real controls in their key states, so you can judge your palette on the things it actually has to do.

Color palette contrast summary

All pass
  • 19.3:1AAAContrast ratio 19.28:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 20.1:1AAAContrast ratio 20.13:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 7.3:1AAAContrast ratio 7.30:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 7.6:1AAAContrast ratio 7.63:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 17.0:1AAAContrast ratio 16.99:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 17.7:1AAAContrast ratio 17.74:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 5.2:1AAContrast ratio 5.17:1Passes AA, fails AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 4.8:1AAContrast ratio 4.83:1Passes AA, fails AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 6.4:1AAContrast ratio 6.36:1Passes AA, fails AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 16.9:1AAAContrast ratio 16.90:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 13.8:1AAAContrast ratio 13.83:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 16.3:1AAAContrast ratio 16.25:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 5.6:1AAContrast ratio 5.56:1Passes AA, fails AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 17.7:1AAAContrast ratio 17.74:1Passes AA and AAAWCAG AA requires at least 3:1 for large text and UI elements such as borders and icons; AAA requires 4.5:1.
  • 17.0:1AAAContrast ratio 16.99:1Passes AA and AAAWCAG AA requires at least 3:1 for large text and UI elements such as borders and icons; AAA requires 4.5:1.
  • 17.7:1AAAContrast ratio 17.68:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 7.8:1AAAContrast ratio 7.79:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 7.8:1AAAContrast ratio 7.82:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 8.1:1AAAContrast ratio 8.07:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 8.5:1AAAContrast ratio 8.50:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 7.8:1AAAContrast ratio 7.82:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 7.8:1AAAContrast ratio 7.84:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 8.2:1AAAContrast ratio 8.25:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
  • 8.7:1AAAContrast ratio 8.67:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.

Typography

On background
headingBuild a clear color system
19.3:1 · AAAContrast ratio 19.28:1Passes AA and AAALarge text (≥24px, or ≥19px bold) only needs 3:1 for AA under WCAG; AAA requires 4.5:1.
bodyPick one color and get four ready-to-use palettes for real interfaces.
19.3:1 · AAAContrast ratio 19.28:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
secondarySecondary text supports the main content without competing for attention.
7.3:1 · AAAContrast ratio 7.30:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
linkLearn how the color engine works
17.0:1 · AAAContrast ratio 16.99:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
On surface
headingBuild a clear color system
20.1:1 · AAAContrast ratio 20.13:1Passes AA and AAALarge text (≥24px, or ≥19px bold) only needs 3:1 for AA under WCAG; AAA requires 4.5:1.
bodyPick one color and get four ready-to-use palettes for real interfaces.
20.1:1 · AAAContrast ratio 20.13:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
secondarySecondary text supports the main content without competing for attention.
7.6:1 · AAAContrast ratio 7.63:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
linkLearn how the color engine works
17.7:1 · AAAContrast ratio 17.74:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
On surface · #FFFFFFBorder · #CECECF

Buttons

PrimaryOn accent · #FFFFFF5.2:1 · AAContrast ratio 5.17:1Passes AA, fails AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Default
Hover#2157CC6.4:1 · AAContrast ratio 6.36:1Passes AA, fails AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Focus
Disabled#9AB6F3
Secondary20.1:1 · AAAContrast ratio 20.13:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Default
Hover#EBEBEC16.9:1 · AAAContrast ratio 16.90:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Focus
Disabled#FCFCFCBorder · #CECECF
Outline17.0:1 · AAAContrast ratio 16.99:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Default
Hover#E3E3E413.8:1 · AAAContrast ratio 13.83:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Focus
Disabled
Ghost7.3:1 · AAAContrast ratio 7.30:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Default
Hover#E6E7E716.3:1 · AAAContrast ratio 16.25:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Focus
Disabled
DestructiveOn error · #FFFFFF4.8:1 · AAContrast ratio 4.83:1Passes AA, fails AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Default
Hover#CA23235.6:1 · AAContrast ratio 5.56:1Passes AA, fails AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Focus
Disabled#ED9B9A

Form elements

Email address20.1:1 · AAAContrast ratio 20.13:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Default
Focused
Interactive
Disabled
Enter a valid email address.Error
Message20.1:1 · AAAContrast ratio 20.13:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Role20.1:1 · AAAContrast ratio 20.13:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Checkbox17.7:1 · AAAContrast ratio 17.74:1Passes AA and AAAWCAG AA requires at least 3:1 for large text and UI elements such as borders and icons; AAA requires 4.5:1.
Radio17.7:1 · AAAContrast ratio 17.74:1Passes AA and AAAWCAG AA requires at least 3:1 for large text and UI elements such as borders and icons; AAA requires 4.5:1.
Switch17.0:1 · AAAContrast ratio 16.99:1Passes AA and AAAWCAG AA requires at least 3:1 for large text and UI elements such as borders and icons; AAA requires 4.5:1.

Badges

Neutral17.7:1 · AAAContrast ratio 17.68:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
PrimaryOn accent · #FFFFFF5.2:1 · AAContrast ratio 5.17:1Passes AA, fails AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.

Status badges & alerts

Success/warning/error/info are fixed colors, independent from your palette - the same convention used by shadcn/ui, Linear and Stripe, so status meaning never shifts with your brand color. What does depend on your palette here is the tinted background and surrounding text - use these to check the fixed status colors read well against your background, not to see them change.

Success7.8:1 · AAAContrast ratio 7.79:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Warning7.8:1 · AAAContrast ratio 7.82:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Error8.1:1 · AAAContrast ratio 8.07:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Info8.5:1 · AAAContrast ratio 8.50:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.
Payment successful7.8:1 · AAAContrast ratio 7.82:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.

Your invoice has been paid and a receipt was sent to your email.

Storage almost full7.8:1 · AAAContrast ratio 7.84:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.

You are using 92% of your available storage.

Update failed8.2:1 · AAAContrast ratio 8.25:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.

We could not save your changes. Please try again.

New feature available8.7:1 · AAAContrast ratio 8.67:1Passes AA and AAAWCAG AA requires at least 4.5:1 for regular text; AAA requires 7:1.

Custom themes are now available in your workspace settings.

Why test a palette on components, not just swatches

A palette can look balanced as a row of swatches and still fall apart on the controls people actually touch: a button label that sinks into its fill, placeholder text too faint to read, a disabled state that looks the same as the enabled one. Components fail in their states - default, hover, focus, disabled - and each state uses your colors a little differently.

Elements renders typography, buttons, form fields, badges and status alerts in those states with your current palette, in two views: Lab, an isolated table of states, and Mockup, the same components inside a small page layout. Every text and border pairing is checked against WCAG on the spot, and failing colors come with a suggested fix.

Want to see the palette on full page layouts instead? Open Explore Need to check one specific pair of colors? Use the contrast checker Want the full guide to the contrast summary and fixes? Read the Elements guide

Frequently asked questions

What is the Elements preview?

A component lab for your color palette: typography, buttons, form fields, badges and status alerts rendered as real UI controls in your current colors, with no page layout around them - so you judge the palette on the things it actually has to style.

Which states of a component does it show?

Interactive components are shown in their key states - default, hover, focus and disabled. Each state mixes your colors a little differently, which is why weak contrast usually shows up here before it shows up on a full page.

How does the contrast check work?

Every text, border and icon pairing is measured against the WCAG rules: AA needs at least 4.5:1 for regular text and 3:1 for large text and UI elements such as borders, while AAA needs 7:1 for regular text. Failing pairs are flagged right on the component, and a summary lists them all.

Can I fix a failing color from this page?

Yes. When a pairing fails you can apply a suggested fix. A color used across the palette is corrected everywhere it appears, while a fix scoped to a single element affects only that element - so you can repair contrast without rebuilding the palette.

What is the difference between Lab and Mockup?

Lab is an isolated table of components and their states, best for checking details one by one. Mockup places the same components inside a small page layout so you can see how they sit together in context.

Do success, warning and error colors follow my palette?

No. Status colors are fixed on purpose so green, amber and red keep their meaning; only the tint and background around them adapt to your palette. That is why an alert can still fail contrast on an unusual palette even though its status color stays the same.

Export