Calculates the WCAG 2.1 contrast ratio between a foreground and background colour. Shows whether the combination passes AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 normal, 4.5:1 large) accessibility standards. Input colours in hex, RGB, or HSL. Includes a live preview of the text on the background.
Enter your foreground and background colours to check if they meet WCAG accessibility requirements. To convert your colour to a different format first, use the Hex ↔ RGB ↔ HSL Converter.
Black on white
Input
#000000 on #ffffff
Output
21:1 — Passes AA and AAA ✓
Convert colour values between Hex, RGB, HSL, and HSB formats.
Simulate how images appear under different types of colour blindness.
Generate harmonious colour palettes from a base colour.
Generate linear, radial, and conic CSS gradients with live preview.
Compare two blocks of text and highlight the differences.
Test regular expressions against sample text with live match highlighting.
Sample Text Preview
This is what normal body text looks like.
Large text (18pt+ or 14pt bold)