Loading the interactive tool… It runs in your browser — if it doesn't appear, enable JavaScript.
Pick or paste your text and background colors; the contrast ratio computes instantly with pass/fail badges against every WCAG threshold — AA and AAA, normal and large text — plus a live preview rendered in your actual colors. The math is the standard relative-luminance formula, the same one audit tools and browser devtools run.
Accessibility aside (though it shouldn't be an aside): contrast failures are among the most-cited issues in accessibility complaints and lawsuits, and the easiest to fix at design time.
Frequently asked questions
What ratio do I need to pass WCAG AA?
4.5:1 for normal text, 3:1 for large text (18pt+, or 14pt bold) and UI components. AA is the level most regulations and contracts reference; AAA (7:1 normal) is best-practice for body text where achievable.
My brand color fails — what now?
Usually the fix is darkening the text shade or lightening the background a step or two while keeping the hue, rather than abandoning the color. Test the adjusted pair here; small luminance shifts often clear the bar with no visible brand drift.
Does this handle text on images or gradients?
Ratios are defined between two solid colors. For text over images, check against the lightest and darkest regions behind the text — or add a scrim/overlay so the background becomes predictable.