Color Contrast Checker

Introduction

Accessible color contrast is not optional for most public-facing products — WCAG 2.x guidelines define minimum contrast ratios between text and background colors, and regulatory frameworks in government, healthcare, and education increasingly reference those thresholds. A brand palette that looks beautiful in a mood board can fail compliance when #94a3b8 body text sits on #f1f5f9 backgrounds at 2.8:1. Guessing by eye is unreliable; luminance math is not.

Certoflow's Color Contrast Checker computes WCAG 2.x contrast ratios between foreground and background colors with AA and AAA pass/fail indicators and a live text preview. All calculations run in your browser — no color pairings upload to a server. Light and dark theme support lets you evaluate contrast in the same viewing conditions your users may use.

What this tool does

Feature	Behavior
Input	Foreground and background hex colors
Output	Contrast ratio (e.g. 4.52:1)
WCAG AA	Pass/fail for normal text (4.5:1) and large text (3:1)
WCAG AAA	Pass/fail for normal text (7:1) and large text (4.5:1)
Preview	Sample text rendered on background swatch
Copy	Export ratio and color values

Large text is defined per WCAG as 18px+ regular weight or 14px+ bold.

How it works

WCAG contrast ratio derives from relative luminance of each color in sRGB space:

1. Parse hex to RGB channels
2. Apply gamma correction per channel (linearize sRGB)
3. Compute relative luminance: L = 0.2126*R + 0.7152*G + 0.0722*B
4. Ratio = (L_lighter + 0.05) / (L_darker + 0.05)

function relativeLuminance({ r, g, b }) {
  const transform = (c) => {
    const v = c / 255;
    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
  };
  return 0.2126 * transform(r) + 0.7152 * transform(g) + 0.0722 * transform(b);
}

Green contributes most to perceived brightness — hence #00ff00 appears brighter than #0000ff at equal channel max. The +0.05 offset prevents division by zero and matches W3C specification.

Certoflow uses the same contrastRatio and wcagLevel functions shared across the color toolkit. No network calls occur during evaluation.

Threshold reference:

Level	Normal text	Large text
AA	4.5:1	3:1
AAA	7:1	4.5:1

Real-world examples

Pre-launch accessibility audit

Design specifies #64748b text on #ffffff background. Checker reports 4.54:1 — passes AA for normal text by a narrow margin. Document the ratio in the release checklist.

Dark mode text selection

Dark background #0f172a with candidate text #94a3b8 scores 5.1:1. Lighter #cbd5e1 scores 9.2:1 — choose based on AA vs AAA targets and visual hierarchy.

Button label validation

White #ffffff text on primary #2563eb background — verify large and normal text thresholds if button uses smaller font sizes on mobile breakpoints.

Fixing failing combinations

Contrast fails at 3.2:1. Darken text using Color Shades Generator, re-check until ratio exceeds 4.5:1. Alternatively lighten background while preserving hue via Hex to HSL inspection.

Complementary color sanity check

Complementary Color Generator produces visually striking pairs. Contrast checker confirms whether complement works for text or only decorative elements.

Common mistakes

Checking only one text size category. Large text has lower AA threshold (3:1). A pairing may pass for headings but fail for body copy — test both.

Ignoring semi-transparent overlays. Text at rgba(255,255,255,0.7) over varied backgrounds produces unpredictable contrast. Test against the composited result, not individual layers.

Assuming brand colors automatically pass. Brand guidelines rarely specify WCAG-validated text pairings. Verify every foreground/background combination used for readable content.

Using contrast checker for non-text UI. WCAG contrast requirements primarily address text and essential icons. Decorative graphics have different criteria.

Confusing color difference with luminance contrast. Two colors can be hue-opposites yet fail contrast if lightness is similar. Complementary hues do not guarantee readability.

Testing against wrong background. Modal text must be checked against the visible backdrop color, including dimmed overlay compositing.

Treating pass/fail as legal compliance. Automated contrast checking is one checkpoint. Full accessibility requires keyboard navigation, ARIA, focus states, and more.

Related tools

Color category:

• Hex to RGB — inspect channel values of failing colors
• Color Shades Generator — darken/lighten until contrast passes
• Complementary Color Generator — explore accent pairings to validate
• Hex to HSL — adjust lightness systematically

Cross-category:

• CSS Formatter — format updated accessible stylesheets
• Reading Time Calculator — content tools for pages you are making accessible
• Image Color Picker — sample colors from mockups before checking

Full directory at /color.

FAQ

Is color data uploaded?

No. Luminance and ratio calculations run locally in JavaScript.

What WCAG version is used?

WCAG 2.x contrast formula (relative luminance method). Same math underlies 2.0, 2.1, and 2.2 contrast requirements.

Does this check non-text contrast (UI components)?

Focus is text contrast ratios. WCAG 2.2 adds non-text contrast at 3:1 for UI components — related but separate criteria.

What counts as large text?

18px+ normal weight or 14px+ bold, per WCAG definition.

Can I test rgba colors?

Convert to opaque hex against your composited background using RGBA to Hex, or sample final rendered color from DevTools.

Does dark mode affect the checker?

Certoflow UI theme does not alter ratio math. Enter the actual foreground and background colors your stylesheet applies.

Offline support?

Yes, after page load.

AAA required for all sites?

AAA is enhanced level — often required for government and accessibility-focused products. AA is the common legal baseline in many jurisdictions.

Why does green affect luminance most?

Human vision is most sensitive to green wavelengths. WCAG weights reflect perceptual sensitivity.

Does this replace axe or Lighthouse?

No. Use alongside automated scanners. Certoflow provides quick pairwise checks during design iteration.