Color Contrast Checker Guide

← Back to Blog

Color Contrast Checker Guide

· 6 min read

What Is Color Contrast?

Color contrast refers to the luminance difference between two colors (usually text color and background color). Contrast is expressed as a ratio, such as 4.5:1 or 7:1 — the higher the value, the stronger the contrast. Maximum contrast is 21:1 (black text on white background), and minimum is 1:1 (same color, no contrast). Sufficient color contrast is fundamental to ensuring text readability and website accessibility.

WCAG Contrast Standards

The Web Content Accessibility Guidelines (WCAG) define two contrast compliance levels:

• Level AA (minimum acceptable): Normal text (below 18px or 14px bold) requires at least 4.5:1; large text (18px+ or 14px bold+) requires at least 3:1.
• Level AAA (enhanced): Normal text requires at least 7:1; large text requires at least 4.5:1. This is the highest standard, not required in all cases but worth pursuing.

Note: These standards apply to text-background color combinations and graphical elements used to convey information (icons, charts, etc.). Decorative elements or non-functional colors are exempt from these standards.

How Contrast Ratio Is Calculated

The contrast ratio defined by WCAG is based on relative luminance. The formula is:

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

Where:
L1 = relative luminance of the lighter color
L2 = relative luminance of the darker color

Relative luminance calculation:
For each RGB channel (0-1 range):
  if c <= 0.04045: c_linear = c / 12.92
  else:            c_linear = ((c + 0.055) / 1.055) ^ 2.4

L = 0.2126 * R_linear + 0.7152 * G_linear + 0.0722 * B_linear

This formula accounts for human eye sensitivity to luminance differences in different colors (the eye is most sensitive to green, then red, and least sensitive to blue). In practice, simply use a contrast checking tool for calculations.

How to Use a Contrast Checker Tool

The steps are straightforward: enter the foreground color (usually text color) as HEX/RGB code, enter the background color as HEX/RGB code, and the tool immediately shows the contrast ratio with pass/fail indication for AA and AAA standards. Practical tips:

• Test all common text/background combinations in your palette
• Test light mode and dark mode separately
• Test whether hover-state color changes still meet standards
• Don't forget to test placeholder text colors (often low contrast, frequently failing)

Common Contrast Problems and Fixes

Most common contrast problems:

• Light gray text: Designers often use light gray for secondary text, but it frequently fails. Fix: ensure secondary text contrast is at least 4.5:1 (e.g., change from #999999 to #767676)
• White text on colored buttons: White text on light-tone buttons (light yellow, light pink) almost always fails. Fix: use dark text on light-colored buttons
• Colored text on colored background: Like green text on blue background. Fix: always use white or very dark colors for text on colored backgrounds

Integrating Contrast Checking into Your Workflow

Contrast checking should not be an "after-the-fact check" done only after design completion, but should permeate the entire design process. Recommended workflow: check contrast during the color selection phase, make contrast validation a required step in design reviews, use design tools with contrast checking support (like Figma plugins), and scan for contrast issues using automated tools (axe, Lighthouse) during code reviews.

Contrast Requirements for Non-Text Elements

WCAG 2.1 also sets contrast requirements for non-text UI components and graphical elements (WCAG 1.4.11 Non-text Contrast): UI components used to convey information (like form borders, checkboxes) need at least 3:1 contrast with adjacent colors. Key parts of icons and informational graphics also need to meet 3:1 contrast.

Try the online tool now — no installation, completely free.

Open Tool →