Contrast Checker

Key takeaways

• WCAG 2.x ratio from two hex colors
• AA and AAA results for normal and large text
• Pure sRGB math — no DOM required in the processor
• Pair with Color Converter when adjusting HSL lightness

What is a contrast checker?

A contrast checker measures the luminance difference between text (foreground) and its background so you can meet WCAG AA or AAA thresholds.

WCAG defines contrast ratio as (L1 + 0.05) / (L2 + 0.05) using relative luminance in sRGB. AA needs at least 4.5:1 for normal text and 3:1 for large text; AAA raises those to 7:1 and 4.5:1. This tool evaluates those thresholds for a hex pair. It does not replace full accessibility audits (focus states, non-text contrast, or APCA).

Features

• WCAG ratio

  Relative luminance contrast to two decimal places.

• AA / AAA matrix

  Normal and large text thresholds in one report.

• Hex inputs

  Supports #rgb and #rrggbb for both colors.

• Private

  Brand colors never leave your browser.

How it works

1. 1

   Enter foreground

   The text or icon color as hex.

2. 2

   Enter background

   The surface color behind the text.

3. 3

   Check

   Read the ratio and AA/AAA pass/fail lines.

Example walkthroughs

• Strong body text

  Near-black on white typically clears AAA for normal text.

  #111827

• Muted gray risk

  Light gray on white often fails AA for small body copy.

  #9ca3af

Use cases

• Design system tokens

  Validate text/on-surface pairs before publishing a palette.

• Marketing page QA

  Check hero subcopy and button labels on brand backgrounds.

Code snippets

• Contrast ratio formula

  js

  WCAG 2.x contrast ratio from relative luminances L1 and L2.

  // (Lighter + 0.05) / (Darker + 0.05)
  const ratio = (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);

Common errors

• Invalid foreground/background

  Cause: Missing # hex digits or a non-hex CSS color function.

  Fix: Use #rgb or #rrggbb. Convert hsl()/rgb() in Color Converter first.

• Passes large text but fails normal

  Cause: Ratio sits between 3:1 and 4.5:1.

  Fix: Darken/lighten one side, or reserve that pair for large headings only.

About Contrast Checker

Contrast Checker helps you validate text color against a background before you ship a theme, marketing page, or component library. Enter a foreground hex and a background hex to see the contrast ratio plus clear PASS/FAIL lines for WCAG AA and AAA on normal and large text.

Designers and engineers search for “wcag contrast” when a brand blue looks fine on white in Figma but fails on a tinted card, or when dark mode body copy sits too close to the surface color. Catching that in a private browser tool is faster than waiting for an audit report and safer than pasting unreleased brand hex values into a random SaaS.

Large text in WCAG terms is roughly 18pt+ (or 14pt+ bold). The ratio math here is exact; whether your UI type qualifies as “large” still depends on rendered size and weight. Non-text UI components have a separate 3:1 guidance — this page focuses on text contrast pairs.

All luminance math runs client-side. Convert or tweak colors in Color Converter, paste the resulting hexes here, and iterate without uploading palettes. For QR posters and label art, check surrounding copy so dark modules and body text both remain readable.

Best practice: aim for AA at minimum on body copy, prefer AAA for long-form reading when brand allows, and re-test every theme variant (hover, disabled, dark) rather than assuming one ratio covers the system.

Frequently asked questions

Explore more

• All tools

  Browse formatters, converters, encoders, and more.

• Utilities

  QR codes, color conversion, and WCAG contrast checks.

• Privacy

  How client-side tools handle your data.