How to Check Color Contrast for WCAG Accessibility

A practical guide to checking text and background color combinations against WCAG 2.1 accessibility standards using an online color contrast checker.

Color contrast is one of the most commonly failed accessibility criteria on the web. When text doesn't have enough contrast against its background, users with low vision, color blindness, or people viewing screens in bright sunlight simply can't read it. WCAG 2.1 addresses this with specific contrast ratio requirements.

WCAG AA Normal Text

4.5:1 minimum

WCAG AA Large Text

3:1 minimum

WCAG AAA Normal Text

7:1 minimum

Maximum Contrast

21:1 (black on white)

What is Color Contrast?

Color contrast is the difference in luminance between foreground text color and background color. WCAG uses a mathematically defined formula to calculate relative luminance for each color, then derives a contrast ratio from those values. The ratio ranges from 1:1 (no contrast — identical colors) to 21:1 (maximum contrast — black on white).

                Why it matters: Approximately 1 in 12 men and 1 in 200 women have some form of color vision deficiency. Millions more experience low vision as they age. Meeting contrast requirements isn't optional — it's a legal requirement under laws like the ADA, Section 508, and EN 301 549.
            

How to Check Color Contrast

Using an online color contrast checker like SnapUtils is the fastest way to verify your colors. Here's how:

Enter your text color. Use the color picker or type a hex value (e.g., #ffffff for white).
Enter your background color. Type the hex value or pick from screen using the eye dropper tool.
Read the contrast ratio. The tool instantly calculates the contrast ratio and shows you which WCAG levels your color pair passes.
Check the compliance matrix. You'll see pass/fail results for AA normal text, AA large text, AAA normal text, and AAA large text.
Use suggestions if needed. When your colors fail, the tool suggests the nearest accessible alternatives.

Understanding WCAG Contrast Levels

WCAG 2.1 defines two conformance levels with different contrast requirements:

WCAG Level AA

Normal text (under 18pt / 14pt bold): Minimum contrast ratio of 4.5:1. This is the standard requirement for most websites and apps.

Large text (18pt+ regular / 14pt+ bold): Minimum contrast ratio of 3:1. Large text is easier to read, so the requirement is relaxed.

UI components and graphical objects: Minimum contrast ratio of 3:1 regardless of size.

WCAG Level AAA

Normal text: Minimum contrast ratio of 7:1. This is a stricter standard used by organizations committed to high accessibility.

Large text: Minimum contrast ratio of 4.5:1.

                Practical note: AA compliance is the most commonly required standard. If you're unsure which level to target, aim for AA first. AAA compliance is harder to achieve aesthetically and is not always required by law, but it provides a better experience for users with more severe vision impairments.
            

Contrast Ratio Calculation

The WCAG contrast ratio formula is:

(L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated by linearizing each RGB component, weighting it, and summing. The formulas are defined in the WCAG 2.1 specification.

For a quick reference: black text on white background has a 21:1 contrast ratio — the maximum possible. Dark gray text on white is typically around 10-15:1. Light gray text on white often fails AA (below 4.5:1).

Common Contrast Mistakes

Light gray on white: Text like #cccccc on white background has roughly 1.6:1 — fails everything.
Blue links on white: Standard blue #0000ff on white is only about 2.5:1 — fails AA. Use darker blue like #0050ff (4.8:1) or #0066cc (5.3:1).
White text on colored backgrounds: A light blue background like #c0d8ff needs darker text — #003380 gets you 9.4:1, but pure black #000 on #c0d8ff is only 3.8:1.
Disabled button text: Low-contrast disabled states are a common accessibility failure. Even disabled elements need AA compliance.
Placeholder text: Form placeholder text should meet AA contrast. Many sites use placeholder-only labels which fail at low contrast.

How to Read Contrast Results

When you check a color pair, here's how to interpret the results:

4.5:1 or higher: Passes WCAG AA for normal text. Suitable for body copy, UI labels, and paragraph text.
3:1 or higher: Passes WCAG AA for large text only. Use for headings and large callouts if normal text would be too dark.
7:1 or higher: Passes WCAG AAA. Highest standard — use for maximum accessibility or if required by policy.
Below 3:1: Fails all WCAG requirements. Requires immediate fix.

Try the Color Contrast Checker

Check any color combination for WCAG 2.1 AA and AAA compliance instantly.

Open Color Contrast Checker →

Which WCAG Level Should You Target?

For public-facing websites: WCAG AA is the legal standard in most jurisdictions (ADA, Section 508, European EN 301 549, and others). Every accessibility lawsuit and audit expects AA compliance.

For internal tools: Still target AA minimum. Your colleagues with glasses, temporary eye conditions, or screen glare will thank you.

For AAA compliance: Use as a stretch goal or for specific high-impact areas. AAA is not always achievable aesthetically, but large text and UI components can often pass AAA without much difficulty.

Summary

Checking color contrast is simple with the right tool. Start by using #000000 text on #ffffff background (21:1 — maximum contrast) and work from there. Every deviation from pure black-on-white should be verified against the WCAG formula before shipping. Use the contrast checker to test your brand colors, UI elements, and form fields early in the design process.

Accessibility isn't an afterthought — it's a design constraint that makes products better for everyone. The Color Contrast Checker at SnapUtils makes it free and instant to verify your choices.