WCAG contrast ratios sound like a chore until they save your launch from a lawsuit or a bug report from a user with low vision.
The ratio is a number between 1:1 (no contrast, the same color on the same color) and 21:1 (pure black on pure white). Two thresholds matter. AA is 4.5:1 for body copy and 3:1 for large text and UI components like icons or form borders. AAA is the stricter 7:1 for body copy.
A real example. Take a primary button at #5B6CFF on a white background. Contrast comes out around 4.96:1. That passes AA for body copy, comfortably passes AA for the button label as large text. Move the same button to a #11141B dark surface, contrast jumps to about 4.21:1 — still passes AA Large, but is just under AA for body copy. Either bump the lightness up by ten points or reserve that variant for icon-sized targets.
Accent badges are usually safe because they are large UI components, so 3:1 is enough. But the text on the badge has to clear 4.5:1 against the badge background, not against the page. This is where the contrast table here helps — it pairs every brand color against the surface, not against an idealized white.
Disabled text is the trap. Designers often pick a 40% opacity gray that lands around 2.8:1, which fails both AA and AA Large. WCAG explicitly exempts disabled controls, but disabled text is still hostile to people with low vision. Aim for at least 3:1 even when the spec lets you off.
For a brand color palette, the working rule is simple: pick a primary that hits 4.5:1 against your light surface, an accent that hits at least 3:1 against both light and dark, and a body color that hits 7:1 if you can afford it. Anything else is rework.
The contrast checker in the generator highlights every pair of brand color and surface in green when it passes AA and red when it fails. Use it as your first sanity check, not the last one before launch.