Build colour palettes that pass contrast checks before you ship
Pick a base colour and the tool builds a palette around it, checking every foreground and background pairing against WCAG contrast thresholds as it goes. It flags combinations that would fail before they reach production, which is faster than testing swatches by eye in the browser inspector. The maths follows standard contrast formulas, but treat the result as a starting point: it can still misjudge edge cases, so check the final pairing against your actual type size and weight.
Getting reliable contrast readings from the True-Contrast Smart Palette
The True-Contrast Smart Palette checks the contrast ratio between colours as you build a palette, flagging pairings that fall short of accessibility standards before they reach production. This guide is for anyone assembling a colour system, whether for a brand identity or a component library, who wants to catch contrast problems early rather than during an accessibility audit. Follow the three steps below and you'll come away knowing how to read the tool's results and where to still use your own judgement.
-
Set your base colours
Enter or paste the colours you're starting from, so the tool has a base palette to test.
-
Read the contrast results
Check each colour pairing against the WCAG (Web Content Accessibility Guidelines) thresholds built into the tool, and see at a glance which combinations pass and which fall short.
-
Adjust and export the palette
Adjust any colour that fails until its ratio clears the threshold, then export the finished palette for use in your design system.
True-Contrast Smart Palette
Pick a foreground (text) colour and a background colour below. You get the exact contrast ratio straight away, PASS or FAIL badges for WCAG AA and AAA, a live preview, and if either level fails, a fix that genuinely keeps the same hue wherever one exists at that lightness.
WCAG 2.1 defines two relevant thresholds for normal body text: AA needs a contrast ratio of at least 4.5:1, AAA needs at least 7:1. Larger text has lower thresholds, but this tool always checks the stricter body text targets.
Contrast ratio is calculated from the relative luminance of each colour, exactly as WCAG 2.1 publishes the formula. No colour is silently rounded away: an invalid hex shows a message right next to the field instead of freezing your last result.
Result
Contrast ratio: -
The quick brown fox jumps over the lazy dog. This sample shows your chosen text colour on your chosen background.
Suggested fixes
Each suggestion below keeps your original hue and saturation and searches only lightness for the smallest change that reaches the target. If no lightness of that hue reaches the target on this background, the card falls back to pure black or white and says so plainly.
Fix for AA (4.5:1)
Suggested hex: -
Actual ratio: -
Fix for AAA (7:1)
Suggested hex: -
Actual ratio: -
Check a colour palette's contrast in seconds
The True-Contrast Smart Palette checks a foreground and background colour pair against WCAG contrast thresholds and tells you where the pairing fails. It's built for anyone assembling a brand identity or interface who wants a quick accessibility (a11y) read without opening a full audit tool. The maths behind it is straightforward, but the tool can still get an edge case wrong, translucent colours especially, so treat the result as a starting point rather than a final sign-off.
No account required · Free to use · Works in any browser
Popular Tools
CSS Variable Architect
An interactive CSS Variable Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Variable Architect
True-Contrast Smart Palette
An interactive True-Contrast Smart Palette, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / True-Contrast Smart Palette
CSS Unit Converter (px / rem / em / vw / vh)
An interactive CSS Unit Converter (px / rem / em / vw / vh), free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Unit Converter (px / rem / em / vw / vh)
Aspect Ratio Calculator
An interactive Aspect Ratio Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / Aspect Ratio Calculator