Loading...
Related:ICOFavicon Generator▢Placeholder Image GeneratorQRQR Code GeneratorOGMeta Tag GeneratorGIT.gitignore Generator{ }JSON EditorMDMarkdown PreviewJSJS Minifier

WCAG Contrast Checker — Test Foreground and Background Color Ratios

WCAG contrast checker computes the exact luminance ratio between any two colors and tells you instantly whether that pairing meets accessibility guidelines. Enter a foreground and background color — by hex code or with the built-in color picker — and see the ratio alongside pass/fail badges for Normal AA, Normal AAA, Large AA, and Large AAA thresholds. A live preview renders sample text at both normal and large sizes so you can judge legibility visually, not just numerically. Everything runs locally in your browser, making it a fast way to validate text and background combinations before shipping a design.

Features

  • Exact WCAG math

    Uses the standard relative luminance and contrast ratio formulas from the WCAG 2.x specification.

  • Four compliance badges

    Instantly see pass/fail for Normal AA, Normal AAA, Large AA, and Large AAA thresholds.

  • Live legibility preview

    Sample text renders at normal and large sizes with your exact colors so you can eyeball readability.

  • One-click swap

    Swap foreground and background instantly to check both text-on-background and inverted combinations.

How to check color contrast for WCAG compliance

Verify a text and background color pairing meets accessibility standards.

  1. Enter your colorsType a hex value or use the color picker for both the foreground (text) and background color.
  2. Read the ratioThe contrast ratio updates live, shown as a number like 4.53 : 1.
  3. Check the badgesNormal AA, Normal AAA, Large AA, and Large AAA badges show pass or fail for each WCAG level.
  4. Preview legibilityReview the sample text at normal and large sizes rendered with your actual colors.

Examples

Black text on white background

Input
Foreground: #000000, Background: #FFFFFF
Output
Contrast ratio: 21.00 : 1 — passes Normal AA, Normal AAA, Large AA, Large AAA

Gray text on white background

Input
Foreground: #767676, Background: #FFFFFF
Output
Contrast ratio: 4.54 : 1 — passes Normal AA and Large AA/AAA, fails Normal AAA

Frequently Asked Questions

What contrast ratio do I need for WCAG AA compliance?
Normal-sized text needs at least 4.5:1. Large text (at least 18pt, or 14pt bold) needs at least 3:1 to meet WCAG 2.1 Level AA.
What is the difference between AA and AAA?
AA is the standard compliance level most sites target: 4.5:1 for normal text, 3:1 for large text. AAA is stricter, requiring 7:1 for normal text and 4.5:1 for large text.
What counts as "large text" under WCAG?
Large text is defined as at least 18pt (24px) regular weight, or at least 14pt (~18.5px) bold. Everything smaller is treated as normal text with stricter thresholds.
How is the contrast ratio calculated?
Each color's relative luminance is computed from its linearized sRGB channels. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance and L2 is the darker one, per the WCAG 2.x formula.
Does this tool store or upload my colors?
No. All parsing and contrast calculations happen locally in your browser — nothing is sent to a server.
What hex formats are supported?
You can enter 3-digit or 6-digit hex codes, with or without a leading #, such as #fff, fff, #ffffff, or ffffff.