Tiny Toolkit

Contrast Checker (WCAG)

Enter a foreground and a background colour 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 colour 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 colour contrast matter?
Sufficient contrast ensures text is readable for people with low vision or colour 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 colours 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.