Choose the right contrast-check approach by classifying the element first: WCAG AA requires at least 4.5:1 for normal text, 3:1 for large text, and 3:1 for non-text UI components and graphics. Once you know whether the element is text or a graphical component, whether its text is large, and whether the background is one stable color, you can select both the correct threshold and the most useful way to use a WCAG contrast checker.
The right approach is not to search for one universal pass-or-fail number. A body paragraph, a large heading, and an input-field border are evaluated against different requirements, while a flat color swatch may not represent text placed over an image. AA is the baseline to meet, while AAA is the stronger text target; decide which level applies before changing the design.
Start With the Element and Target
Begin with the element’s function and its rendered text size. Body copy, form instructions, and ordinary labels generally belong to the normal-text category. A heading or promotional line qualifies as large text when it is at least 18pt regular or at least 14pt bold. If the size is borderline, choosing the correct WCAG threshold by text size helps you classify it before testing.
| Content category | WCAG AA minimum | WCAG AAA minimum |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| UI components and graphical objects | 3:1 | No separate AAA threshold |
A text label inside a control is still text, so apply the threshold for its rendered size. The separate non-text rule applies to elements such as control boundaries, icons, form-field borders, and focus indicators. These categories follow WCAG 2.x, as summarized in W3C’s WCAG 2.1 Contrast (Minimum) guidance.
Match the Method to the Background
After classifying the element, choose a checking method that matches how its colors render. A flat text-and-background pair can be checked directly. A gradient, image, or transparent layer needs a context-aware approach because the effective background can change from one part of the element to another.
| Rendering situation | Best checking approach | Colors to evaluate |
|---|---|---|
| Text on a solid background | Run one direct foreground-and-background check. | The exact rendered text and background colors. |
| Large text on a solid background | Run the same color-pair check, then apply the large-text thresholds. | The same foreground and background pair. |
| Text over a gradient or image | Check the effective background extremes separately. | The foreground with the lightest and darkest relevant background colors. |
| Translucent text or background layer | Determine the effective rendered colors before checking. | The visible foreground and the resulting background color. |
| Icon, border, or focus indicator | Use the non-text comparison. | The graphical color and the adjacent background color. |
The checker evaluates one foreground color against one background color. For a changing background, separate fixed-color checks are therefore more reliable than entering one representative shade and assuming it covers the entire element.
Check a Solid Color Pair in the Checker
For a flat background, use the Color Contrast Checker in this fixed sequence:
- Open the Color Contrast Checker and set the foreground or text color with the color picker, or type a hex value such as #111111.
- Set the background color in the same way, using the color picker or entering a hex value such as #ffffff.
- Read the exact contrast ratio and the AA or AAA pass/fail badges for the normal-text, large-text, and UI thresholds displayed by the checker.
- Compare those results with the category and conformance target you selected earlier, rather than treating every badge as the final answer.
- If the pair misses your target, adjust either the foreground or background color and check it again until it meets the required level.
Because the calculation runs locally in your browser, you can check brand colors and design tokens without uploading them. The result applies to the exact pair you entered, so repeat the workflow for every distinct text-and-background combination.
Interpret the Ratio and Pass/Fail Badges
Read the ratio as a property of the color pair, not of the order in which the colors were entered. WCAG divides the lighter relative luminance by the darker one, so swapping foreground and background returns the same result. That symmetry makes comparison easy, but you still need the correct pair from the rendered page.
The formula is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color and L2 is the darker one. The checker derives relative luminance from sRGB using the WCAG 2.x channel weights, then returns a ratio ranging from 1:1 for identical colors to 21:1 for pure black on pure white.
Use the numeric ratio together with the relevant badge. An AA pass for large text does not mean the same pair passes normal-text AA. If the pair misses the level you need, adjust either color and rerun the calculation rather than relying on visual judgment alone.
Test Changing Backgrounds as Separate Pairs
For text over a gradient, image, or semi-transparent overlay, first identify the effective colors in the places where the text sits. Test the lightest and darkest background points against the foreground, and check any additional combinations that can occur around the text. A letter may be readable over one part of a graphic and fail over another.
The checker does not evaluate an entire changing scene in one entry; it returns the result for the two colors supplied. For translucent text or backgrounds, determine the effective rendered colors before entering them. This keeps the manual workflow aligned with what a reader actually sees rather than what appears in a design file.
Pay particular attention to placeholder text, disabled states, thin decorative type, field borders, icons, and focus indicators. Each can play a different role, so the same background does not imply the same required threshold.
Review a Palette Consistently
For a brand palette or design-token library, use the checker as a repeatable review rather than a one-off approval:
- List each role, such as body text, large headings, muted text, borders, icons, and focus indicators.
- Record the foreground and background hex values for each role.
- Classify the element and note whether the target is AA or AAA.
- Enter the pair, save the exact ratio and relevant pass/fail result, and note any image or transparency involved.
- Recheck affected pairs whenever a shared color token changes.
Because the tool runs locally, this review can remain private. Its workflow requires you to supply each relevant color pair rather than importing a stylesheet or scanning a page automatically, so the reviewer must also document the rendering context.
Recognize the Limits of the Result
A contrast result answers one narrow question: does this supplied pair meet this threshold? It does not certify that the entire page or component conforms to WCAG, and it cannot judge semantics, keyboard behavior, or whether every character has enough visual separation from an image. Those questions need separate review.
Contrast also measures luminance rather than hue. Red on green may look different to some viewers while still failing because the colors have similar brightness. Never use color as the only signal: pair it with a text label, icon, underline, or another visible cue. A practical decision order is to classify the element, choose the target, determine whether the background is fixed or changing, enter the actual colors, read the ratio and relevant badge, adjust if needed, and record the context. Follow that order for every pair to make the decision repeatable rather than subjective.
If you're weighing options, Compare Color Contrast Checking Approaches with WCAG Tools covers this in detail.