File ConversionColor ConversionFree Tool
Color Contrast Checker
Calculate the real WCAG contrast ratio between two hex colors using the official relative-luminance formula, with AA/AAA pass-fail for normal and large text.
How to Use Color Contrast Checker
- 1Enter your foreground and background hex colors separated by a comma
- 2Click Convert
- 3Check the contrast ratio and AA/AAA pass/fail results
About Color Contrast Checker
What it measures
Enter two colours as hex codes separated by a comma, for example #000000, #FFFFFF. The tool computes the WCAG contrast ratio, which compares the relative luminance of the two colours on a scale from 1:1 (identical) to 21:1 (black on white), and shows pass or fail for each level.
The thresholds
- Normal text: 4.5:1 for AA and 7:1 for AAA.
- Large text (about 18pt, or 14pt bold, and bigger): 3:1 for AA and 4.5:1 for AAA.
Most accessibility policies and legal requirements target AA, so 4.5:1 is the practical goal for body copy.
Practical notes
- Both 3-digit (
#fff) and 6-digit hex are accepted. The tool does not take named colours, RGB or HSL. - Contrast is not the whole story. Thin fonts, small sizes, background images and gradients can make text hard to read even if the ratio passes.
- Do not rely on colour alone to convey meaning, such as red for errors with no text or icon.
The ratio is calculated on the two colours you type; it does not sample a real page.
Frequently Asked Questions
Using the official WCAG 2.x relative luminance formula on both colors, then computing (lighter + 0.05) / (darker + 0.05) — the exact method browsers' own accessibility inspectors use, verified against known reference values (pure black vs. white gives exactly 21:1).
4.5:1 for AA-level normal text, 7:1 for AAA-level normal text, 3:1 for AA-level large text (18pt+/14pt+ bold), and 4.5:1 for AAA-level large text — this tool checks your ratio against all four thresholds at once.
Two hex colors separated by a comma, e.g. "#000000, #FFFFFF" — typically your text color and its background color.
No — the calculation happens entirely in your browser.