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

Color Lightener & Darkener

Generate tints and shades of any color. Click any swatch to copy its HEX, RGB, or HSL code.

Color Code Converter

Convert colors between HEX, RGB, RGBA, HSL, HSLA, and CSS named colors instantly.

Tailwind Shade Generator

Generate a full 11-stop Tailwind CSS color scale from any base color. Export as a JS object or CSS variables.