Loading page
About this tool
Compare two color palettes side-by-side in real-world UI mockups to test contrast and aesthetics.
Color Palette Compare puts two five-role palettes — primary, secondary, background, surface and text — side by side and renders each one into the same dashboard mockup, complete with cards, buttons and body copy. Under each mockup it reports the WCAG contrast ratio between that palette's background and text, graded AAA at 7:1, AA at 4.5:1 and large-text AA at 3:1. It is for designers deciding between two directions who want to judge them in a real layout instead of as loose swatches.
Open Color Palette Compare on AltFTool — it loads instantly in your browser.
Fill in the five roles of the Palette A card — primary, secondary, background, surface and text — using each row's swatch picker or hex field, or press 'Randomize' to fill all five at once.
Do the same in the Palette B card on the right. There is no compare button: each column redraws its own Design Preview mockup, including the Dashboard Metrics card and the Primary Action and Secondary buttons, the moment a color changes.
Read the 'Bg vs Text Contrast' panel under each mockup, which scores that palette's background against its text and labels the pair AAA, AA, AA (Large Text) or Fail, then use the copy icon beside any hex to put that value on your clipboard.
Each palette is rendered into the same interface, so you compare like with like: same card, same buttons, same text hierarchy.
White or black is selected for each button automatically, based on whichever clears 4.5:1 against that button's fill.
Background against text is scored continuously and labelled AAA, AA, AA large text or Fail, so a change to either colour shows its effect immediately.
Five: primary, secondary, background, surface and text. That is enough to render a realistic page — background behind everything, surface for cards, primary and secondary for the two buttons, and text for all copy.
4.5:1 between background and text for AA body copy, 7:1 for AAA, and 3:1 for large text only. The badge under each mockup shows which grade your current pair reaches, calculated with the standard WCAG relative luminance formula.
It measures each button's fill colour against white; if that ratio is above 4.5:1, white is used, otherwise black. That is why the label flips as you drag a primary colour from light to dark.
Yes — the randomize button on either side regenerates all five roles at once, which is a fast way to see how rarely arbitrary colour combinations pass the 4.5:1 threshold. You can also type or pick any hex value directly.