Smart Contrast

Enter your colors. Compare options that keep the text, keep the background, or adjust both.

Preview sizes

Sizes apply to every preview. Large text starts at 18 pt regular (24 px) or 14 pt bold (about 18.67 px). These dropdowns use whole pixels, so bold large text starts at 19 px.

Make every word readable. Good contrast makes the details easier to see.

4.48 : 1

Below AA normal

    Accessible options Rows: 4.5:1 · 7:1 · 3:1

    How suggestions and change indicators work

    Rows target 4.5:1 (AA normal / AAA large), 7:1 (AAA normal), then 3:1 (AA large text). Show 3:1 controls the large-text row, and Show 7:1 controls the AAA row. The 4.5:1 row is always visible. Each sample has its own rating; a 3:1 option may fail for normal text. When a later visible row repeats the exact text/background pair above it in the same column, its slot stays blank. Preview sizes apply to this card and all suggestions. Each Bold checkbox changes the available sizes to keep its preview in the correct normal or large-text category. Normal text stays below 24px regular or 18.67px bold; large text starts at 24px regular or 19px bold in these whole-pixel dropdowns. If a selected size no longer fits, the nearest allowed size is selected automatically. The calculated color ratio does not change with font size or weight, and the normal/large ratings remain appropriate for these constrained ranges. Normal and large text results are shown separately above; large means at least 24px regular or about 18.67px bold.

    We search perceptual lightness in OKLCH, preserving hue and chroma where possible. The first column keeps your original background. Passing input pairs are replaced with alternatives near the row's minimum, so the 3:1 row can suggest lighter text on a light background. The middle column reverses your exact colors when they already pass AA. Otherwise it keeps your text and finds an accessible background based on your input. Its AAA option keeps the AA background when possible and changes the text to reach 7:1. The last column adjusts both colors, with AAA refining the AA pair above. Chroma is reduced when necessary to stay within sRGB; the paired search also considers saturation alternatives at the original lightness.

    = Unchanged means the HEX is identical. ↑ Lighter / ↓ Darker describe perceptual lightness. If lightness is essentially unchanged but chroma changes, the arrow is labeled More saturated / Less saturated. These are nearby sampled options, not a guarantee of the globally closest pair.

    Contrast is rechecked after conversion to the displayed HEX. Checks apply to opaque, solid sRGB colors; gradients and transparency need their own review. WCAG contrast guidance.