Tiny Toolkit

Contrast Checker (WCAG)

Enter a foreground and a background color to instantly see their contrast ratio and whether it meets WCAG AA or AAA standards — for both normal text and large text sizes. Sufficient contrast is a legal accessibility requirement in many jurisdictions and measurably improves readability for all users. Adjust either color until you reach the target level.

All processing happens in your browser. No data is sent to any server.

Frequently Asked Questions

What are WCAG AA and AAA contrast requirements?
WCAG AA requires a 4.5:1 contrast ratio for normal text (3:1 for large text). AAA is stricter at 7:1 (4.5:1 for large text).
Why does color contrast matter?
Sufficient contrast ensures text is readable for people with low vision or color blindness, and is a legal accessibility requirement in many jurisdictions.
How is the contrast ratio calculated?
The ratio is derived from the relative luminance of the two colors using the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter luminance.

Related Tools

Type Scale Generator — Modular Typography Scale

Generate a modular type scale from any base size and ratio. Choose from Perfect Fourth, Golden Ratio, and more — get px, rem, CSS variables or Tailwind config output. Free.

Font Size Converter — pt to px to rem

Convert font sizes between pt (print), px (screen), and rem. Set your root font size and see all three equivalents instantly. Includes a reference table of 17 common print sizes. Free.

Color Lightener & Darkener — Generate Tints and Shades

Generate lighter tints and darker shades of any color. See the full scale from white to black with one-click copy of HEX, RGB, or HSL values for each swatch. Free.