What this checker calculates
Contrast ratio is a number that says how clearly a piece of text stands apart from the color behind it. This page computes it exactly the way WCAG (the Web Content Accessibility Guidelines, version 2.x) defines it for Success Criterion 1.4.3 (Contrast Minimum, level AA) and Success Criterion 1.4.6 (Contrast Enhanced, level AAA). Both colors are read as sRGB, and the input accepts three-digit (#abc) and six-digit (#aabbcc) HEX codes. Under the ratio you will see the relative luminance of each color and the one-line arithmetic that produced the result. If the pair falls short of a target, the tool also proposes the smallest change to the text color, darker or lighter, that reaches it. Building a palette from scratch is a different job, which theColor Palette Generator handles; this page is for auditing combinations you have already chosen.
How relative luminance is computed
Before two colors can be compared, each one needs a relative luminance L between 0 (black) and 1 (white). The procedure has three steps.
- Divide each of R, G and B by 255 to get a value s between 0 and 1.
- Undo the gamma encoding of sRGB to get linear light. If s is 0.03928 or less, use s Γ· 12.92. Otherwise use ((s + 0.055) Γ· 1.055) raised to the power 2.4. In other words, a short straight segment near black and a power curve everywhere else.
- Combine the three channels in proportion to how sensitive the eye is to each: L = 0.2126 Γ R + 0.7152 Γ G + 0.0722 Γ B. The weights come from the Rec. 709 primaries.
The key point is that green carries by far the largest weight and blue the smallest. A fully saturated green (#00FF00) has L = 0.7152, while a fully saturated blue (#0000FF) has only L = 0.0722, even though both channels sit at 255. This is why "vivid" and "high contrast" are not the same thing.
One small technical note. The sRGB standard (IEC 61966-2-1) writes the threshold as 0.04045, whereas the WCAG 2.x text uses 0.03928. This tool follows the WCAG number. With 8-bit channels no integer value falls between the two thresholds, so the results are identical either way; all 256 channel values were checked.
The contrast ratio formula and the role of 0.05
Contrast ratio = (L of the lighter color + 0.05) Γ· (L of the darker color + 0.05). The 0.05 added to both sides stands in for ambient light reflecting off the screen and for the fact that a monitor's black is never perfectly zero. It also pins the scale: black against white gives 1.05 Γ· 0.05 = 21, so every possible result lies between 1:1 and 21:1. It makes no difference which color is the text and which is the background. White on black and black on white are both 21:1.
Pass criteria at a glance
WCAG defines "large text" as at least 18 point (24 CSS pixels), or at least 14 point (about 18.67 CSS pixels) when bold. A point is 1/72 inch and a CSS pixel is 1/96 inch, so multiplying points by 96/72 gives pixels.
| Category | Size rule | AA minimum | AAA enhanced |
|---|---|---|---|
| Normal text | Everything that is not one of the two cases below | 4.5 : 1 | 7 : 1 |
| Large text (regular weight) | 18pt = 24px or larger | 3 : 1 | 4.5 : 1 |
| Large text (bold) | 14pt = 18.67px or larger | 3 : 1 | 4.5 : 1 |
Non-text elements have their own rule. Success Criterion 1.4.11 (Non-text Contrast, added in WCAG 2.1) asks that the parts of a user interface needed to recognize a control or its state, such as the border of an input field, a checkbox or an icon that carries meaning, differ from adjacent colors by at least 3:1. The "UI components and icons" chip in the tool checks that threshold. Separately, Success Criterion 1.4.1 (Use of Color) says color alone must not be the only way to convey information. For links inside body text, a common approach is either a color that differs from the surrounding text by 3:1 or more, or an extra cue such as an underline.
How light can gray text get?
The table below lists gray text on a white background. The values are calculated when the page is built, and the third decimal place is cut off rather than rounded up.
| Text color | Ratio | AA normal | AAA normal | AA large |
|---|---|---|---|---|
| #595959 | 7.00 : 1 | Pass | Pass | Pass |
| #767676 | 4.54 : 1 | Pass | Fail | Pass |
| #777777 | 4.47 : 1 | Fail | Fail | Pass |
| #949494 | 3.03 : 1 | Fail | Fail | Pass |
| #AAAAAA | 2.32 : 1 | Fail | Fail | Fail |
| #CCCCCC | 1.60 : 1 | Fail | Fail | Fail |
On white, the lightest neutral gray that still clears AA for normal text (4.5:1) is #767676 at 4.54:1. The next step lighter, #777777, reaches only 4.47:1 and fails. You could not tell the two apart by eye, but an automated audit treats them differently. To satisfy AAA for normal text (7:1), the gray has to be as dark as #595959 (7.00:1). The #AAAAAA often used for placeholders and captions comes to just 2.32:1, which misses even the 3:1 bar for large text.
Pure colors and brand colors score lower than you expect
| Text color | Background | Text L | Ratio | AA normal | AA large |
|---|---|---|---|---|---|
| Pure red #FF0000 | White | 0.2126 | 3.99 : 1 | Fail | Pass |
| Pure blue #0000FF | White | 0.0722 | 8.59 : 1 | Pass | Pass |
| Dark green #008000 | White | 0.1544 | 5.13 : 1 | Pass | Pass |
| Pure yellow #FFFF00 | White | 0.9278 | 1.07 : 1 | Fail | Fail |
| Gold #C9A961 | White | 0.4166 | 2.25 : 1 | Fail | Fail |
| Gold #C9A961 | Black | 0.4166 | 9.33 : 1 | Pass | Pass |
| Pure blue #0000FF | Black | 0.0722 | 2.44 : 1 | Fail | Fail |
Pure red on white is 3.99:1. It might look like "4.00" after rounding, but the precise value is nowhere near the 4.5 needed for normal text, so pure red is not safe for body copy. That is also why this tool truncates to two decimals instead of rounding: a true 4.496 should never be displayed as "4.50 : 1" next to a Fail. Pure blue shows the other side of the coin. It scores a comfortable 8.59:1 on white but drops to 2.44:1 on black. The same color can pass on one background and fail on another.
Worked examples
Example 1: dark navy #1A1A2E on white. The channels 26, 26 and 46 linearize to roughly 0.0103, 0.0103 and 0.0273, and the weighted sum is L = 0.0116. White has L = 1, so the ratio is (1 + 0.05) Γ· (0.0116 + 0.05) = 17.05 : 1. That clears even AAA for normal text with plenty to spare.
Example 2: pure red #FF0000 on white. Only the red channel is at 255, so L = 0.2126 Γ 1 = 0.2126. The ratio is 1.05 Γ· 0.2626 = 3.99 : 1. That passes AA for large text (3:1) and fails AA for normal text (4.5:1), so a small error message in this red should be switched to a darker red.
Example 3: gold #C9A961. Its luminance is 0.4166, a mid-light value. White text on it gives only 2.25:1, not even 3:1, while black text gives 9.33:1. Whether black or white text wins depends on the background luminance crossing about 0.179 (the square root of 1.05 Γ 0.05, minus 0.05). Any background lighter than that favors black text.
How the suggested passing color is found
When a pair misses the target, the tool mixes the text color toward black and toward white, narrowing the mix ratio with a binary search until it first reaches the goal (4.5:1 or 7:1). Because only lightness is moved, the hue of the original color is preserved as far as possible, and the direction that needs the smaller change is the one offered. If the background sits so close to mid-gray that neither direction can reach the goal, the tool says so, and the background has to change too. Treat the suggestion as a starting point and make the final call together with your brand guidelines.
Common mistakes and limits of the tool
- Text over images and gradients. When the background is not one flat color, a single ratio says little. Test the lightest and the darkest spot behind the text separately.
- Transparency (opacity, RGBA). Semi-transparent text has to be converted to the color it actually shows after blending with what is behind it. Eight-digit HEX is not accepted here.
- Disabled controls, decoration and logos. WCAG does not set a minimum ratio for these, though users should still be able to tell that a control is disabled.
- Dark mode. A pair that passes in light mode does not automatically pass in dark mode. Check each theme separately.
- Numbers are not the whole story. Thin typefaces, small sizes and glare make text harder to read at the same ratio. The ratio is a floor, not a guarantee of readability. Future guidance drafts, often discussed under the name WCAG 3.0, explore alternative models such as APCA that take weight and size into account, but the formula on this page is the one the current 2.x checks use.
- Color vision differences. Contrast ratio measures lightness difference only. If information depends on hue alone, some users will miss it. Try the Color Blindness Test to see how widely perception can vary.
Putting the result to use
- For anything people must read, such as body copy, button labels and form hints, treat AA for normal text (4.5:1) as the minimum. Large headlines may go down to 3:1.
- Define the passing colors once as CSS custom properties so the whole site stays consistent. If you need the HEX value as RGB or HSL, the Color Converter does that.
- The Copy result button puts the colors, the ratio and each verdict on your clipboard as text, ready to paste into a design document or an accessibility review log.
- Requirements for accessible websites vary by country and sector, and many of them reference WCAG. Check the current rules and the version and level that apply to you rather than relying on a number from memory.
Frequently Asked Questions
Is brightness the same thing as contrast ratio?
No. Luminance is a value for one color, while the contrast ratio compares two luminances. WCAG's relative luminance also weights R, G and B by 0.2126, 0.7152 and 0.0722, so green contributes the most, unlike a plain average of the three channels.
Do logos and decorative elements have to meet these ratios?
WCAG 1.4.3 makes exceptions for logotypes, purely decorative content, inactive interface components and text that is part of a photograph. Graphics that convey information or an action, such as an icon button, fall under 1.4.11 and need 3:1.
What if my pair is just under 4.5:1?
A result of 4.49:1 is still a Fail. Automated audits and reviews do not round up, so darken the text a little or lighten the background. The suggestion feature looks for the nearest color that passes.
How do I know whether my text counts as large?
It depends on the rendered size: 18pt (24px) or more, or 14pt (about 18.67px) or more if bold. Because users can change their browser's font size, applying the normal-text threshold is the safer choice when you are unsure.
Which combinations besides black on white score high?
Black on white at 21:1 is the theoretical ceiling. A dark navy or deep charcoal on white, like Example 1 above at about 17:1, stays very readable while being a little softer on the eyes.
Are my colors uploaded anywhere?
No. All calculations run inside your browser, and nothing you enter is stored or sent.
Related tools
- Color Palette Generator - build complementary and analogous color schemes
- Color Converter - HEX, RGB and HSL in both directions
- Color Blindness Test - see how color perception differs between people