Free · No sign-up · Browser processing
Color Contrast Checker
Check two HEX colors for WCAG AA and AAA text contrast using the relative luminance formula.
Enter foreground and background on separate lines. Supports opaque 3-digit and 6-digit HEX; alpha, gradients and images need separate evaluation.
STEP 1
Enter or paste your input
The example is ready to edit. Your input stays in this browser.
Processed locally in your browser. Avoid sharing the result if it contains private data.
How to use Color Contrast Checker
- Paste your input or load the included example.
- Check the input format described above the editor.
- Select Check contrast, then inspect the result or any validation message.
- Copy or download the output for your workflow.
Format and limitations
Enter foreground and background on separate lines. Supports opaque 3-digit and 6-digit HEX; alpha, gradients and images need separate evaluation.
Example input
#ffffff #111827
Practical guides
- WCAG Color Contrast: AA and AAA Ratios Explained — Understand text contrast thresholds, relative luminance, large text rules, and how to test foreground/background pairs.
- How to Build an Accessible UI Color Palette — Choose and test semantic color pairs for buttons, labels, focus indicators, and dark mode interfaces.
Does this tool upload my input?
The transformation runs in your browser. This tool does not send input to a conversion API. Browser memory limits still apply; split very large inputs into manageable batches.