How to Check Color Contrast for Accessibility — Step by Step

Checking color contrast for accessibility takes about 30 seconds once you know your hex codes. You do not need specialized software or a browser extension — just your two colors and a browser tab. This guide walks through the exact process from start to finish.

Step 1: Find your foreground and background hex codes

You need two hex codes: the text color (foreground) and the surface color behind it (background). If you are working in a design tool:

• Figma — select the text layer and check the Fill panel. Select the frame or shape behind it for the background color.
• CSS — check your color variable or property values. Look for color: and background-color: on the text element.
• Brand guidelines — most brand style guides list official hex codes in the color section.

If you are working from a screenshot or image and need to identify a color, use the Color Extractor to pick the exact pixel value.

Step 2: Enter your colors and read the contrast ratio

Open the Color Contrast Checker. Enter or paste your foreground hex code in the top-left field and your background hex code in the top-right field. The tool updates instantly as you type.

The large number in the center is your contrast ratio — for example, "4.7:1" means the lighter color is 4.7 times more luminant than the darker one. Below the ratio you will see four badges:

• AA Normal — body text, labels, form fields
• AA Large — headings, large UI text
• AAA Normal — enhanced body text
• AAA Large — enhanced headings

Green "PASS" means the combination meets that threshold. Red "FAIL" means it does not.

Sell Custom Apparel — We Handle Printing & Free Shipping

Step 3: Fix any failing color combinations

If a combination fails, you have three options:

Option A — Use the Suggest Passing Color button. Click it and the tool automatically shifts the foreground color to the closest shade that passes WCAG AA. This preserves the general hue while achieving compliance.

Option B — Manually adjust the hex values. For dark text on a light background, darken the foreground (lower the hex values). For light text on dark, lighten the foreground or darken the background. Each adjustment updates the ratio immediately.

Option C — Swap colors. Sometimes the same two colors pass in one direction (dark text on light background) but fail when inverted. The Swap button instantly checks the other direction.

Common color contrast failures to watch for

These combinations fail WCAG AA more often than designers expect:

• Light gray text on white — any gray above roughly #767676 on white (#FFFFFF) will fail AA normal text
• Yellow or light green on white — these colors have high luminance and low contrast against white backgrounds
• Blue on black — pure blue (#0000FF) actually has a fairly low contrast ratio against black — about 2.4:1
• Brand colors on brand colors — many logos use colors that look visually distinct but have similar luminance values
• Placeholder text — placeholder text is commonly styled at 40-50% opacity, which almost always fails

What contrast ratio do you actually need?

For most websites, the target is WCAG AA compliance. This means:

• 4.5:1 for all normal body text and small UI elements
• 3:1 for large text (18px regular or 14px bold) and certain UI components like button borders

AAA (7:1 for normal text) is worth targeting in interfaces used by people with low vision, medical or government services, or anywhere maximum readability matters. It is not typically required by law but is achievable without making designs look harsh — many dark-on-white combinations exceed 7:1 naturally.

Check every text color-background pair in your design, including placeholder text, disabled state labels, and focus indicators.

Frequently Asked Questions

Do I need to check every single color in my design?

Check every text-background combination that appears in the live interface. That includes body text, headings, links, labels, placeholder text, button text, and tooltip text. You do not need to check decorative images or non-text graphics unless they carry meaning.

What counts as "large text" for WCAG purposes?

Large text is defined as at least 18pt (24px) at regular weight, or at least 14pt (approximately 18.67px) at bold weight (700 or above). Large text has a lower required ratio of 3:1 instead of 4.5:1.