Contrast Checker Guide

Everything you need to know about testing color contrast for WCAG accessibility — how to use the checker, what the ratios mean, and how to fix failures.

What This Guide Covers

  • How to use the OmniColor contrast checker
  • What contrast ratios mean and why they matter
  • WCAG AA and AAA thresholds for normal vs. large text
  • Common accessibility failures and how to fix them
  • Real examples of passing and failing color pairs

Opening the Tool

Open the Contrast Checker →

The checker accepts two colors: a foreground (text) and a background. It instantly shows the contrast ratio and pass/fail results for four WCAG thresholds.

Understanding the Results

The checker displays four results:

  • AA Normal: Passes if ratio ≥ 4.5:1 (for body text)
  • AA Large: Passes if ratio ≥ 3:1 (for headings, 18pt+ text)
  • AAA Normal: Passes if ratio ≥ 7:1 (enhanced body text)
  • AAA Large: Passes if ratio ≥ 4.5:1 (enhanced large text)

The exact contrast ratio is displayed at the top, from 1:1 (identical colors) to 21:1 (black on white).

What "Large Text" Means

WCAG defines large text as:

  • 18pt (24px) or larger in regular weight
  • 14pt (18.66px) or larger when bold

Below these sizes, the stricter 4.5:1 threshold applies.

How the Ratio Is Calculated

The ratio uses the WCAG 2.2 relative luminance formula:

Contrast = (L1 + 0.05) / (L2 + 0.05)

Where L1 = luminance of the lighter color
and   L2 = luminance of the darker color

For each RGB channel (0-255):
  c = channel / 255
  c' = c ≤ 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055)^2.4

L = 0.2126 * R' + 0.7152 * G' + 0.0722 * B'

Example: Pass and Fail

Passing example

Foreground #15243B (dark navy) on background #FFFFFF (white):

Ratio: 14.53:1 — passes AA and AAA for both normal and large text.

Failing example

Foreground #7A8699 (light gray) on background #FFFFFF (white):

Ratio: 3.05:1 — fails AA Normal (needs 4.5:1), passes AA Large only.

Common Failures

Placeholder text

Placeholder text is often designed to be subtle — which usually means failing contrast. Real placeholder text on real forms commonly fails at 2–3:1.

Disabled states

Grey-out disabled buttons and inputs are usually exempt from WCAG (they are inactive controls), but should still be readable for users to understand they are disabled.

Colored text on tinted backgrounds

Blue text on light blue backgrounds, red text on pink badges, and green text on light green panels often fail even when they look fine to designers.

Brand colors used for text

Many brand colors are too light for text use. Test each brand color against your background before using it for body text.

White text on brand colors

White text on yellow, orange, light green or bright cyan fails. White text on most mid-to-dark colors passes.

How to Fix Contrast Failures

1. Darken the text

Reduce lightness until the ratio passes. This is usually the easiest fix.

2. Lighten the background

Move the background toward white. Small changes can make a big difference.

3. Increase font size

If you are close to 4.5:1, bumping the text to 18pt+ lets you use the 3:1 threshold.

4. Bold the text

Bold text at 14pt+ qualifies as large and can use 3:1.

5. Add a text shadow or outline

Not a WCAG-approved fix, but improves readability for borderline cases. Prefer color changes over shadows.

Testing Real Color Pairs

Here are some common color pairs and whether they pass:

Color Pair Ratio Result
#000000 on #FFFFFF21.00:1AAA
#15243B on #FFFFFF14.53:1AAA
#4A5A75 on #FFFFFF7.12:1AAA
#FFFFFF on #155EEF4.86:1AA
#7A8699 on #FFFFFF3.05:1AA Large only
#FFFFFF on #FFC1071.74:1Fail

Beyond Text

Contrast requirements also apply to:

  • Icons: Essential icons must have 3:1 contrast against their background
  • UI components: Input borders, button outlines, focus rings — 3:1 minimum
  • Graphs: Series colors should be distinguishable; use labels and patterns too
  • Error states: Do not rely on color alone — add icons or text

Testing Workflow

  1. Extract the exact color values from your design or CSS
  2. Test each text-on-background pair with the checker
  3. Note which pairs fail and at which level
  4. Adjust colors (darken text or lighten background) until they pass
  5. Document the final values in your design tokens
  6. Re-test periodically as colors change

Related Tools

Frequently Asked Questions

Open Contrast Checker →