Loading…
Test color contrast against WCAG AA and AAA accessibility levels.
🔒 100% client-side — uses the WCAG 2.1 relative luminance formula. Large text = ≥18pt or ≥14pt bold.
Color contrast is the single most common accessibility failure on the web. If your text does not stand out enough from its background, low-vision users, people in bright sunlight, and anyone on a dim screen will struggle to read it. The WCAG standard defines minimum contrast ratios; this checker computes the exact ratio for any two colors and tells you which levels you pass.
4.5:1. This is the legal requirement in most accessibility laws.3:1. Large means ≥18pt, or ≥14pt bold.7:1. A stricter target for maximum readability.4.5:1.3:1 against adjacent colors.Each color is converted to a relative luminance value that weights red, green, and blue by how sensitive the human eye is to each. The contrast ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the lighter and L2 the darker luminance. The maximum possible ratio is 21:1 (pure black on pure white). The 0.05 offset accounts for ambient screen glare.
If a pair fails, darken the text or lighten the background — small luminance changes move the ratio a lot. Avoid relying on hue alone: red on green can "look" different but have a near-identical luminance (a problem for color-blind users). For large text, you have more freedom, but for body copy aim well above 4.5:1 so users on dim or dirty screens still read comfortably.
The Color Contrast Checker (WCAG) handles color contrast checkerdirectly in your browser. Paste or type your input, and the tool processes it instantly — no upload, no signup, no waiting. It's built for the moments when you need a quick transformation and don't want to leave your workflow.
Because the tool runs client-side, it's fast and private. Your text never touches a server, which makes it safe for sensitive content. The interface is keyboard-friendly and works on any device with a modern browser.
Common uses: people reach for this tool when they need to use a wcag aa aaa contrast ratio checker, accessibility color contrast calculator, hex color contrast checker online, or minimum contrast for accessible text.
Browser-based tools like this one have a few real advantages over installed software or manual methods:
The Color Contrast Checker (WCAG) is based on the following formula:
CR = ( L_lighter + 0.05 ) / ( L_darker + 0.05 )
Variables: L_lighter: relative luminance of the lighter color (0-1) L_darker: relative luminance of the darker color (0-1) CR: contrast ratio (ranges from 1 to 21) 0.05: constant that accounts for ambient light flare
WCAG contrast ratio of two colors from their relative luminance L. Ratios ≥ 4.5 pass AA for normal text; ≥ 7 passes AAA. The 0.05 accounts for ambient light flare.
Worked example: Step 1: White text has L = 1.0 on a black background with L = 0.0. Step 2: CR = (1.0 + 0.05) / (0.0 + 0.05) = 1.05 / 0.05 = 21. Result: 21:1, the maximum possible contrast; passes AAA (≥ 7).
More tools you might find useful