Color Contrast Checker

WCAG color contrast checker

Accessible color contrast helps people read text across different displays, lighting conditions, and visual abilities. This checker compares foreground and background colors, calculates their WCAG contrast ratio, and reports all four text thresholds.

How contrast ratio works

Colors are converted from sRGB to relative luminance. The lighter luminance is placed above the darker luminance in this formula:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

L1 is the lighter color and L2 is the darker color. Ratios range from 1:1 for identical colors to 21:1 for ideal black and white.

WCAG thresholds

Criterion	Normal text	Large text
AA	4.5:1 or higher	3:1 or higher
AAA	7:1 or higher	4.5:1 or higher

WCAG defines large text as at least 24px regular text or 18.67px bold text. Text that does not meet the large-text definition must pass the normal-text threshold.

Common uses

• Validate body copy, labels, buttons, and form controls
• Check text over brand colors, gradients, and tinted surfaces
• Compare design tokens before shipping a theme
• Review light and dark mode pairs
• Find accessible alternatives for low-contrast UI states

Practical workflow

1. Enter the actual foreground text color.
2. Enter the background or surface color behind it.
3. Check AA for minimum compliance and AAA for enhanced readability.
4. Review the live preview at the intended font size and weight.
5. Test hover, focus, disabled, placeholder, and visited states separately.

Do not rely on color contrast alone. Text size, font weight, line height, letter spacing, surrounding colors, and non-color cues all influence usability. Interactive controls should also have a visible focus indicator.

JavaScript example

function contrastRatio(foreground, background) {
  const l1 = relativeLuminance(foreground);
  const l2 = relativeLuminance(background);
  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
}

CSS example

:root {
  --text-primary: #1e293b;
  --surface-primary: #ffffff;
}

.body-copy {
  color: var(--text-primary);
  background: var(--surface-primary);
}

Python example

def contrast_ratio(lighter, darker):
    return (max(lighter, darker) + 0.05) / (min(lighter, darker) + 0.05)

Contrast versus non-text content

WCAG also includes requirements for meaningful graphics, icons, and focus indicators. A decorative image may not need the same treatment, but an icon that communicates status or a control boundary should remain distinguishable from its surroundings.