How to Check Color Contrast for Accessibility

WCAG contrast ratios compare the relative luminance of two colors on a scale from 1:1 (identical) to 21:1 (black on white or the reverse in sRGB math). The formula is not “how different the hues look.” Two vivid complementary colors can still fail if their lightness values sit too close.

Why designers get surprised

• Light gray on white looks “clean” in a dark-mode mockup on a calibrated monitor — and fails on a washed-out laptop screen
• Brand primary on brand-tint backgrounds often fails body text even when logos look fine
• Placeholder text and disabled styles are frequent offenders
• Icons and thin strokes need contrast too, not only paragraph copy

A checker computes the ratio for a foreground/background pair and maps it to WCAG pass/fail for normal text, large text, and UI components. Open the color contrast checker whenever a mock hands you two hex codes without proof.

If you still need to convert brand swatches between hex, RGB, and HSL before testing, use the hex color converter and hex color conversion guide.

WCAG 2.1 (and 2.2) Success Criterion 1.4.3 Contrast (Minimum) is Level AA. Success Criterion 1.4.6 Contrast (Enhanced) is Level AAA. Most product teams aim for AA on body UI and treat AAA as a stretch goal for long-form reading experiences.

Normal text (roughly under large-text thresholds)

• AA — at least 4.5:1
• AAA — at least 7:1

Large text

• AA — at least 3:1
• AAA — at least 4.5:1

“Large text” in WCAG terms is commonly at least 18pt regular or 14pt bold (CSS approximations depend on font metrics — when unsure, treat body copy as normal text and meet 4.5:1). Non-text UI components and graphical objects have their own 3:1 guidance under related criteria; do not assume icon-only controls are exempt from contrast thinking.

Report both the raw ratio and the AA/AAA status in design reviews so stakeholders see a number, not only a red/green badge.

Larger, heavier glyphs tolerate slightly lower contrast because stroke width and size improve legibility. That is why AA drops from 4.5:1 to 3:1 for qualifying large text. Abuse of that rule — labeling everything “large” to keep a pastel palette — fails real users and often fails audits when body styles are reclassified correctly.

Practical classification tips

• Marketing hero headlines may qualify as large text; article body almost never does
• Bold labels at intermediate sizes sit in a gray zone — verify computed size, not Figma frame captions alone
• Buttons with short labels still need clear contrast on the fill and on the label
• Placeholder text is still text; low-contrast placeholders hurt more than they “look subtle”

Use the checker’s large-text evaluation when you intentionally ship big headings. Default to normal-text thresholds for product UI chrome. Live preview helps you see whether a pair that “technically passes large text” still feels weak for a critical call to action.

Numbers catch failures; previews catch “technically pass, still hard to read” moments from thin fonts, letter-spacing, and anti-aliasing. A solid workflow uses both.

1. Paste foreground (text) and background colors as hex or RGB.
2. Read the contrast ratio and AA/AAA results for normal and large text.
3. Look at the live sample at a realistic weight and size.
4. If it fails, adjust lightness of text or background — keep hue if brand allows.
5. Recheck hover, active, and muted variants; each pair is independent.
6. Lock passing values into design tokens and CSS variables.

Test on light and dark themes separately. A pair that passes in light mode can fail when you invert surfaces without rechecking text tokens. Semi-transparent text over images is not a single solid ratio — flatten against representative photos before you claim compliance.

Run every candidate pair through the free WCAG color contrast checker. Generate alternate hex values quickly with the hex color converter when you need HSL lightness steps.

Failing pairs need more luminance distance. You rarely need a brand-new hue. Darken text, lighten backgrounds, or both, until the ratio clears the target with a little headroom for real devices.

Tactics that work

• Prefer adjusting lightness in HSL/OKLCH rather than shifting hue away from brand
• Reserve muted grays for non-essential chrome, not primary body copy
• Raise contrast on focus states so keyboard users see where they are
• Avoid gray-on-color for small labels on saturated fills — try white/near-black with tested ratios
• Use suggestions from the checker when it offers accessible alternatives, then re-validate

What not to do

Do not rely on color alone to convey state (error vs success) even when contrast passes. Do not “fix” contrast by adding text shadows that are not part of the measured foreground. Do not assume AAA everywhere if it forces unreadable pure black on pure white for every chip and badge — prioritize body text and critical controls first, then enhance.

When you need to quantify “how much lighter” a channel step is, a percentage calculator can help with simple relative math; for broader measurement conversions outside color, see the unit conversion guide.

Contrast fails late when color is treated as pure decoration. Bake checks into tokens and PR habits so marketing one-offs do not reintroduce pastel body text every launch.

• Define text-on-surface pairs as tokens (text.primary on surface.default) rather than freehand hex in each component
• Document which pairs are AA-approved for body, large title, and inverse themes
• Add automated axe/lighthouse-style checks in CI for core templates
• Require a contrast screenshot or ratio note for new brand colors
• Retest after glassmorphism, gradients, and image backgrounds ship

Palette generators are excellent for exploration and weak as a final accessibility sign-off. Always finish on a real foreground/background pair in the contrast checker. Companion tools like a color palette generator help you explore options once core pairs pass.

Enter two colors, read the ratio and WCAG levels, preview sample text, and apply suggestions when a pair fails.

1. Open the free color contrast checker.
2. Enter foreground and background colors in hex or RGB.
3. Read the contrast ratio and AA/AAA results for normal and large text.
4. Use the live preview to judge real readability, not only the badge.
5. If the pair fails, try suggested accessible alternatives or adjust lightness.
6. Recheck hover/muted/inverse variants used in the same component.
7. Copy final hex values into your design tokens or CSS variables.

Related tools when work moves past contrast: hex color converter, unit converter, and percentage calculator.