Color Contrast Checker

The Color Contrast Checker measures the WCAG contrast ratio between a foreground and a background color and grades it against the accessibility standards people actually rely on. Pick the two colors with the swatch pickers or type hex values into the pair of fields, and the ratio updates live. The tool computes relative luminance using the WCAG logarithmic formula, then divides the lighter against the darker values, offsetting each by 0.05. Results surface as a Contrast Ratio stat in the standard x:1 format and a WCAG Score badge that summarizes the outcome as AAA at 7:1, AA at 4.5:1, AA Large at 3:1, or Fail. Four compliance cards break the score into each individual criterion — AA Normal with a 4.5:1 threshold, AA Large at 3:1, AAA Normal at 7:1, and AAA Large at 4.5:1 — each marked with a green pass or red fail chip. A live preview panel renders sample text in your exact colors, including the note that large text means 18pt or 14pt bold. A legend of badges along the bottom documents all four thresholds for quick reference.

1. 1

   Pick the Foreground color with its swatch picker or enter a six-digit hex value like #0f172a into the text field.

2. 2

   Pick the Background color the same way; the ratio, score, and preview recalculate immediately on either change.

3. 3

   Read how the Contrast Ratio stat pairs with the WCAG Score badge for a single-line verdict on the pairing.

4. 4

   Review the four WCAG compliance cards to see each individual threshold verdict with its required x:1 minimum.

5. 5

   Inspect the live preview panel, which renders headline, body, and large-text samples in your exact colors.

• Body copy design — confirm paragraph text meets AA Normal 4.5:1 before shipping a blog or documentation theme.
• Button and CTA styling — verify white-on-colored button labels clear the large-text bar against the button background.
• Form UX — check placeholder, label, and helper-text colors so the least prominent guidance stays above WCAG floor.
• Data visualization — stress-test the palette extracted from a chart against the backgrounds it will render on.
• Brand compliance audits — a batch of color pairs checked here becomes the documented evidence for an accessibility report.
• Dark-mode themes — validate the inverted foreground and background sets early, where low contrast failures cluster.

• Design to AA at minimum for all interactive text and maps, and reserve AAA for long-form body content that readers absorb.
• Remember large text counts as 18pt or 14pt bold, so the AA Large 3:1 threshold applies only to genuinely oversized text.
• Check text placed over images against the actual overlay colors, not the theme background, since photos shift effective contrast.
• Do not rely on color alone to convey meaning; pair any ratio result with icons, underlines, or labels for clarity.
• Prefer dark-ink-on-light-background pairs, which typically outperform light-on-dark at equal nominal ratios in readability tests.
• Re-verify pairs after any brand color rebrand, because a slight hue shift can quietly drop a passing ratio below its threshold.

• Check the worst-case color pair in your palette first; if the extremes pass, everything in between usually does too.
• Test the same foreground against both light and dark backgrounds before committing a theme, since one variant will inevitably be weak.
• Use the large-text badge as a design signal to bump body sizes up to 18pt where ratios get tight, then relax colors slightly.
• Keep a shortlist of known-good pairs from this tool in your design tokens so future pages start from verified ratios.