RandoziColor Contrast Checker
Type two hex colors, a text color and a background color. The page computes the WCAG 2.2 contrast ratio, shows a live preview, and tells you pass or fail for normal text, large text and interface components at AA and AAA. Everything stays in your browser.
Contrast ratio
4.48:1
| Requirement | Needs | Result |
|---|---|---|
| Normal text, AA | 4.5:1 | Fail |
| Normal text, AAA | 7:1 | Fail |
| Large text, AA | 3:1 | Pass |
| Large text, AAA | 4.5:1 | Fail |
| Interface components and graphics | 3:1 | Pass |
The ratio uses the exact WCAG 2.2 formula on opaque sRGB colors; pass and fail never use the rounded display. It is not a certification of conformance: gradients, images, transparency and states are not checked. Large text starts at 24 px, or 18.67 px when bold. The shared link keeps only the colors and the level.
How it works
- Enter the text color and the background color as hex codes, or pick them with the color pickers.
- Enter the text size in pixels and tick bold if the text is bold, then choose AA or AAA.
- Read the ratio and the pass or fail result for each requirement.
- Copy the result, or copy a link that reopens these exact colors.
What people use it for
Checking a brand palette
Test your brand color against white and against black before you use it for a button label or a link.
Reviewing a design
Check the grey caption text of a mockup against its background, as normal text and as large text.
Sharing a finding
Send a developer a link that opens the same two colors so they see the same ratio.
Questions
- How is the ratio computed?
- Each sRGB channel c (0 to 1) becomes c ÷ 12.92 if c ≤ 0.04045, otherwise ((c + 0.055) ÷ 1.055) to the power 2.4. The luminance is L = 0.2126 R + 0.7152 G + 0.0722 B. The ratio is (Lmax + 0.05) ÷ (Lmin + 0.05), from 1 to 21. Pass and fail use the exact ratio, never the rounded one.
- Which thresholds does it use?
- Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text, from 24 px, or from about 18.67 px when bold, needs 3:1 for AA and 4.5:1 for AAA. Interface components and graphics need 3:1. A decorative or disabled component has no requirement, and the page says not applicable.
- Does a pass mean my page is accessible?
- No. This is not a certification of conformance. The page checks one pair of opaque sRGB colors. It does not see gradients, images behind text, transparency, hover and focus states, or font weight and rendering.
- What does the shared link contain?
- Only the two colors and the level, in the part of the address after the # sign, such as #fg=000000&bg=ffffff&level=AA. Browsers do not send that part to a server. Invalid values in a link are ignored.