Elements preview: test your color palette on real UI components
A palette that looks balanced as a row of swatches can still fail on the controls people actually use: a button label that sinks into its fill, placeholder text too faint to read, a disabled field that looks the same as an enabled one. The Elements preview in PaletteDesk renders typography, buttons, form fields, badges and status alerts as real components in your colors, checks every pairing against WCAG, and fixes failing colors in one click.
What is the Elements preview?
Elements is a component lab. Unlike the page mockups in Explore, it shows no page layout at all - just the controls a palette has to style, in their key states, next to a live contrast check. Because nothing surrounds the components, a weak color pairing has nowhere to hide.
- Component-level testing: contrast problems show up on the button, input or badge that has them, not somewhere on a busy page.
- All states at once: default, hover, focus and disabled are shown side by side instead of one at a time.
- Instant feedback: change a color in the Color panel and every check recalculates immediately.
What the lab contains
The lab is split into five groups, each one a set of real components:
| Group | What you see |
|---|---|
| Typography | Heading, body text, secondary text and a link, each on the background and on the surface |
| Buttons | Primary, secondary, outline, ghost and destructive buttons, each in default, hover, focus and disabled states |
| Form elements | Text input in default, focused, interactive, disabled and error states, plus textarea, select, checkbox, radio and switch |
| Badges | Neutral and primary badges |
| Status badges & alerts | Success, warning, error and info badges and alerts |
Disabled controls are shown but not held to a contrast requirement: WCAG exempts inactive controls, so the checks focus on the states people actually read.
Lab and Mockup views
The same components can be viewed two ways:
- Lab is an isolated table of components and states. It is the best view for checking details one by one.
- Mockup places the same components inside a small page layout - a navigation bar, a hero, an invite form, a status card and a team table - so you can judge how they work together in context.
Step by step
- Open the Elements preview. It uses your current palette, so it starts with whatever colors you already have in the Color panel.
- Edit the palette in the Color panel, or generate a new one. The components repaint instantly.
- Read the contrast summary at the top. It shows either “All pass” or the number of failing pairs.
- Click a failing row to jump to the component that has the problem, then hover its contrast indicator to see the exact ratio and the suggested fix.
- Apply the fix - or Fix all - then switch to Mockup to see the corrected palette in context.
Contrast levels the preview uses
Every text, border and icon pairing is measured as a contrast ratio and compared against the WCAG thresholds for its type:
| Pairing | AA | AAA |
|---|---|---|
| Regular text | 4.5:1 | 7:1 |
| Large text (24px and up, or 19px and up when bold) | 3:1 | 4.5:1 |
| UI elements such as borders and icons | 3:1 | 4.5:1 |
A pair is marked as failing when it does not reach the AA threshold. The indicator tooltip also tells you whether it reaches AAA.
Reading the contrast summary
The summary lists every checked pair in one place, with failures first:
- Each row names the pairing, for example “Secondary text on surface” or “Primary button on hover”, and shows its ratio.
- Clicking a row scrolls the lab to the component that owns that pair.
- Each failing row has its own Fix button, and Fix all repairs every fixable failure at once.
- Hover states are checked too, because a button can pass in its default state and still fail once the hover color is applied.
How Fix works
A fix moves the color that caused the failure just far enough to reach the AA threshold, and the tooltip shows the before and after colors before you click. There are two kinds of fix:
- A palette fix changes one of your palette roles - text, secondary text, primary or accent - so it affects that color everywhere it is used, not just on this component.
- A local fix applies only to one status badge or alert and does not change the palette.
Because a role can appear in several pairs, a fix is tuned to satisfy all of them, including hover states, so repairing one pair does not quietly break another.
Why status colors do not follow your palette
Success, warning, error and info colors are fixed on purpose, so green, amber and red keep their meaning whatever your brand color is - the same convention used by design systems such as shadcn/ui, Linear and Stripe. What does follow your palette is the tinted background around them. When a status alert fails contrast, the fix adjusts that tint (and, if no tint works, the hue slightly) rather than touching your palette.
Tips for a palette that passes
- Check secondary text first - light gray on white is the most common contrast failure.
- Watch links and outline buttons: they use the primary color for text, so a pale primary fails on both the background and the surface.
- If text on the accent color fails, the accent is probably a mid-tone that suits neither black nor white text; move it lighter or darker.
- Do not skip the hover row. Secondary and outline hover backgrounds move toward the text color, so their contrast can differ from the default state.
- Switch between light and dark mode: status colors have variants for each, so a palette can pass in one mode and fail in the other.
Related guides: the contrast checker · the type scale generator
Frequently asked questions
Is the Elements preview free?
Yes - it is free, with no sign-up. Open it, edit your palette and every check updates live.
What is the difference between Elements and the other Explore modes?
Products and Styles show your palette inside full page layouts. Elements shows only the components themselves, in their states, with a contrast check attached - it is built for finding problems rather than judging overall mood.
Which WCAG level does it check against?
AA is the pass mark: 4.5:1 for regular text, 3:1 for large text and UI elements such as borders and icons. The tooltip for each pair also says whether it reaches AAA (7:1 for regular text).
Will Fix change my whole palette?
A fix on a palette color changes that one role and everywhere it is used, which is usually what you want. Fixes for status badges and alerts are local: they change only that element.
Can I ignore a failing pair?
In the lab you can mute the red highlight for a pair you accept as it is. The highlight comes back on its own if the colors change and the pair fails differently.
Does it replace the contrast checker?
No, they complement each other. The contrast checker measures one chosen pair of colors; Elements checks every pair your palette produces across real components at once.
Ready to test your palette on real components? Open the Elements preview