A WCAG contrast result passes a specific check when its ratio meets the threshold for the content being tested: 4.5:1 for AA normal text, 3:1 for AA large text, 7:1 for AAA normal text, and 4.5:1 for AAA large text. After you run a check, read the exact ratio first, then find the badge for the kind of content you actually have. The Color Contrast Checker returns the ratio together with pass-or-fail results for AA and AAA normal and large text, plus the 3:1 non-text threshold for UI components, icons, and graphical objects.
One color pair can pass one threshold while failing another, so “failed” does not always mean the pair is unusable. It means that the ratio is below the minimum for that particular category. If your required category shows Fail, change the foreground or background color, run the check again, and confirm that the replacement pair clears the appropriate badge. For a final verification, use the displayed ratio and badges as the record of the result, then confirm that the same two colors are the ones rendered in your design.
The important distinction is between the numeric ratio and the conformance badge. The ratio tells you how much luminance difference exists between the two colors. The badge tells you whether that number clears a particular WCAG requirement. Because those requirements depend on text size, weight, and whether the pair is used for text or a non-text component, the final interpretation must match the actual use of the colors.
What the Contrast Result Represents
Contrast ratios measure relative luminance between the lighter and darker colors. Identical colors produce a ratio of 1:1, while pure black on pure white produces the maximum ratio of 21:1. A higher ratio generally means greater luminance separation, but the ratio does not measure every aspect of readability. It does not describe the typeface, letter spacing, text size, image detail beneath the text, or whether color is the only way a meaning is communicated.
The checker uses the contrast calculation specified by WCAG 2.x. Each sRGB color channel is converted to linear light, and the channels are combined into relative luminance using weights of 0.2126 for red, 0.7152 for green, and 0.0722 for blue. The final ratio is calculated as (L1 + 0.05) / (L2 + 0.05), where L1 represents the lighter color and L2 represents the darker color. This is why the displayed number is an exact comparison of the color pair rather than an estimate based on how different the colors appear.
The order of the two inputs does not change the ratio. Swapping the foreground and background produces the same numerical result because luminance contrast is a property of the pair. The order can still help you confirm that you entered the intended text and background colors, but it cannot correct an incorrect color value.
Match the Ratio to the Official Threshold
Compare the displayed ratio with the row that matches your content. A result can clear one row without clearing another, so do not rely on a general idea of “good contrast.” Use the precise requirement for normal text, large text, or a non-text element.
| Content or component | WCAG target | Minimum contrast ratio |
|---|---|---|
| Normal text | AA | 4.5:1 |
| Large text | AA | 3:1 |
| Normal text | AAA | 7:1 |
| Large text | AAA | 4.5:1 |
| UI components, icons, and graphical objects | Non-text contrast | 3:1 |
For the official background behind the minimum contrast requirement, see the W3C's WCAG 2.1 contrast minimum guidance. Remember that the non-text rule is separate from the AA and AAA text thresholds. A focus indicator, form field border, icon, or graphical object should be evaluated against the 3:1 requirement rather than the normal-text threshold.
Run and Verify a Color Contrast Check
Use the same two colors that will appear in the final interface. The process is quick, but checking the correct pair and interpreting the right badge are the parts that determine whether the result is useful.
- Open the Color Contrast Checker. The checker runs in your browser, so you can test colors without sending palette values to a server.
- Set the foreground text color. Use the color picker or type a hexadecimal value such as #111111. Make sure the value represents the final text color rather than an approximation.
- Set the background color. Use the picker or enter another hexadecimal value, such as #ffffff. Use the effective background behind the text, including any solid overlay that changes the visible color.
- Read the exact contrast ratio. Note the displayed number in the form of a ratio, such as 4.5:1. This is the calculated result for the color pair you entered.
- Read the AA and AAA pass-or-fail badges. Check the badge for normal text, large text, or the non-text requirement that applies. A pair may pass one category while failing another.
- Adjust the colors if the required badge shows Fail. Change the foreground or background value, allow the result to update, and check the new ratio and badges until the required category passes.
- Confirm the final pair again. Repeat the check with the exact colors used in the design, and retain the final ratio and conformance result for your records.
Do not interpret a nearby number as a pass. For example, a ratio below 4.5:1 does not satisfy the AA normal-text requirement merely because it is close to 4.5:1. The displayed result and the applicable badge provide the definitive comparison.
Interpret Pass and Fail by Content Type
For body copy, form labels, and other normal-size text, use the 4.5:1 AA threshold. If you are also checking against AAA, normal text needs 7:1. A pair that passes AA can still fail AAA because AAA applies the stricter target; that distinction is expected rather than an error in the checker.
Large text can use lower thresholds because larger or heavier strokes are generally easier to distinguish. WCAG defines large text as at least 18 pt, or 24 px, for regular weight, and at least 14 pt, or about 18.66 px, when bold. The AA minimum is 3:1, while the AAA minimum is 4.5:1. Confirm the actual font size and weight before using the large-text badge; a heading that falls just below the defined size should be evaluated as normal text.
For a button boundary, focus indicator, icon, form field border, or other graphical object, use the separate 3:1 non-text threshold. When the same pair is also used for a graphical element, the non-text badge confirms that comparison independently. A pair that clears 3:1 but misses 4.5:1 will pass the non-text test while failing AAA for large text. Evaluate each result in the role it will actually serve.
Correcting a Result That Shows Fail
Begin by identifying which badge failed. If normal text fails AA, the present pair needs more luminance separation than the current ratio provides. Move the colors toward greater separation—for example, use a darker text color on a light background or a lighter text color on a dark background—and rerun the check. Change one value at a time, watch the updated ratio, and stop once the required threshold is met. Keeping the other color unchanged makes it easier to understand which change affected the result.
Do not assume that two visibly different hues will pass. The ratio measures luminance, not hue. A red and green combination can still fail when their brightness levels are too similar. For that reason, avoid using color as the only way to communicate an error, status, selection, or instruction. Add a text label, icon, underline, or another visible cue so the meaning does not depend on distinguishing the hues alone.
Passing AA is a minimum target rather than a ceiling. When the design allows it, aiming for AAA can provide more comfortable separation for a wider audience. If changing a brand color is not practical, test a nearby foreground or background that preserves the intended palette while clearing the required badge. The checker makes the comparison exact, so the decision can be based on the displayed ratio rather than subjective brightness alone.
Confirm the Final Result in Context
A correct checker result still needs to match the interface where the colors are used. Because the checker evaluates the two colors you enter, review the final CSS, theme values, or design tokens separately for hover, focus, error, disabled, selected, and placeholder states. Check the pair again whenever a state changes either the text or its background. A passing default state does not validate every interactive state in the component.
Gradients, semi-transparent overlays, and text placed over images require extra attention because the effective background can vary beneath the letters. Test against the lightest and darkest points where a letter may sit. Placeholder text, disabled states, and thin decorative fonts are also common places to double-check. If an overlay changes the visible background color, use that effective color rather than the color of an invisible layer.
Finally, confirm that your saved result matches the deployed colors and that you have recorded the ratio, the relevant content category, and the pass-or-fail badge. This creates a clear answer to the question “Did this color pair pass?” without relying on visual memory. It also makes later palette changes easier to audit, because every revised foreground and background pair can be checked again against the same WCAG thresholds.
Related reading: Choosing the Right Approach to WCAG Color Contrast Checks.
Related reading: Best Way to Apply Average Color From an Image.