About the color contrast ratio calculator
This calculator measures the contrast between a text (foreground) color and its background, expressed as a ratio from 1:1 to 21:1, and checks it against the Web Content Accessibility Guidelines (WCAG). Enter two hex colors and it returns the exact ratio plus pass or fail badges for each WCAG threshold. Sufficient contrast is what lets people with low vision, color vision deficiency, age-related sight loss, or anyone reading in glare actually see your text.
WCAG defines four practical thresholds. For normal body text, level AA requires at least 4.5:1 and the stricter level AAA requires 7:1. For large text (at least 18pt, or 14pt bold), the bars drop to 3:1 for AA and 4.5:1 for AAA, because larger letterforms stay legible at lower contrast. Most public-facing sites aim for AA across the board; AAA is the goal for content that must be maximally readable.
The ratio runs from 1:1 (two identical colors, invisible) to 21:1 (pure black on pure white, the maximum). It is symmetric: swapping foreground and background gives the same ratio, so the calculator does not care which color you call the text. The scale is also non-linear in a useful way, weighting the luminance of green most heavily, because the human eye is far more sensitive to green light than to red or blue.
How it works: the WCAG formula
The ratio compares the relative luminance of the two colors. Each hex color is converted to linear RGB, weighted by how the eye perceives each channel, and combined into one luminance value. The lighter and darker luminances then form the ratio.
For each channel c (R, G, B) scaled to 0 to 1: cl = c / 12.92 if c <= 0.03928 cl = ((c + 0.055) / 1.055)^2.4 otherwise Relative luminance L = 0.2126*Rl + 0.7152*Gl + 0.0722*Bl Contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05)
- The 0.05 terms model ambient screen flare, which sets a floor so the ratio never blows up to infinity for near-black colors.
- The 0.2126 / 0.7152 / 0.0722 weights reflect the eye's strong sensitivity to green and weak sensitivity to blue.
- The gamma step (the 2.4 exponent) converts gamma-encoded sRGB values back to linear light, which is what luminance is actually measured in.
- The result is rounded to two decimals and shown as ratio:1, matching the WebAIM checker and browser dev tools.
Worked example
Check the brand teal #0D9488 as text on a white #FFFFFF background.
- Luminance of white: all channels are 1.0, so L_white = 1.0 (the maximum).
- Luminance of teal: linearizing #0D9488 and applying the weights gives L = 0.23.
- Ratio: (1.0 + 0.05) / (0.23 + 0.05) = 1.05 / 0.28 = about 3.74:1.
- Verdict: 3.74:1 passes AA for large text (3:1) but fails AA for normal text (4.5:1).
- Fix: darken the teal to #0F766E (about 5.47:1) for body text, or reserve #0D9488 for headings and large UI labels.
Reference table: WCAG contrast requirements
Minimum contrast ratios from WCAG 2.1 success criteria 1.4.3 (AA) and 1.4.6 (AAA).
| Content | Level AA | Level AAA |
|---|---|---|
| Normal text (under 18pt) | 4.5:1 | 7:1 |
| Large text (18pt+, or 14pt+ bold) | 3:1 | 4.5:1 |
| UI components and graphics (icons, form borders) | 3:1 | 3:1 (no AAA bump) |
| Logos and incidental text | Exempt | Exempt |
| Black on white (reference maximum) | 21:1 | |
Common pitfalls
- Forgetting the large-text exception. A headline at 24px only needs 3:1, so a color that fails for body text may be perfectly compliant for a heading. Always check against the right threshold for the text size.
- Testing against the wrong background. Contrast is between the text and whatever sits directly behind it. Text over a photo, a gradient, or a semi-transparent overlay must be checked against the actual pixels behind each glyph, not the page's base background.
- Trusting placeholder and disabled text. Light gray placeholder text frequently fails AA. WCAG exempts genuinely disabled controls, but placeholders that convey real information should still meet contrast.
- Relying on color alone. Meeting the ratio does not satisfy WCAG if color is the only way information is conveyed (success criterion 1.4.1). Pair color with text labels, icons, or underlines.
- Mismatching the formula. Some tools use the older simple-brightness difference instead of relative luminance. Always confirm a checker uses the WCAG luminance formula above, which this tool does.
Frequently asked questions
What contrast ratio do I need to pass WCAG AA?
For normal body text you need at least 4.5:1. For large text, defined as 18pt and up, or 14pt and up when bold, the requirement drops to 3:1. User interface components and meaningful graphics also need 3:1 against adjacent colors. Meeting AA is the common legal and practical baseline for most websites.
What is the difference between AA and AAA?
They are two levels of strictness in WCAG. Level AA, the widely adopted standard, asks for 4.5:1 on normal text and 3:1 on large text. Level AAA is the enhanced tier, requiring 7:1 on normal text and 4.5:1 on large text. AAA is recommended for content that must be maximally readable but is not expected for entire sites.
Why is the maximum contrast ratio 21:1?
Because pure black has a relative luminance of 0 and pure white has 1, and the formula adds 0.05 to each before dividing: (1 + 0.05) / (0 + 0.05) = 21. No pair of sRGB colors can exceed that, so 21:1 is the ceiling and 1:1 (two identical colors) is the floor.
Does contrast ratio change if I swap foreground and background?
No. The formula always divides the lighter luminance by the darker one, so the ratio is identical whichever color you treat as text. That means you can enter the two colors in either order and get the same result, which is why this tool labels them foreground and background only for convenience.
Is contrast ratio the same as brightness difference?
No. Older guidelines used a simple brightness or color difference, but WCAG 2.x uses relative luminance, which linearizes the sRGB values and weights green most heavily to match human vision. Two colors with the same perceived brightness can have very different luminance, so always use a tool that follows the WCAG luminance formula, as this one does.