Color Contrast Checker

The Color Contrast Checker measures the WCAG contrast ratio between any two colors (foreground and background) to verify text will be readable for users with low vision, color blindness, or simply in difficult lighting conditions. Web accessibility standards (WCAG 2.1) require contrast ratios of at least 4.5:1 for normal text (AA level, mandatory in many jurisdictions) and 7:1 for enhanced accessibility (AAA). Large text has lower thresholds. UI elements and non-text content have their own rules. Missing these ratios means your design is unreadable for a substantial portion of users and may violate ADA, Section 508, or European Accessibility Act requirements.

This tool tells you the exact ratio, the pass or fail status at each WCAG level, and shows a live preview of how text actually looks at that ratio. Pick foreground and background colors with a color picker, paste hex codes, or type RGB values. The ratio updates instantly. If the combination fails, the tool suggests adjustments to the foreground or background colors that would bring it into compliance while staying close to your original intent. Works equally well for light mode (dark text on light background) and dark mode (light text on dark background), and handles semi-transparent foregrounds by computing the effective color against the background.

WCAG 2.1 defines contrast ratio using relative luminance per ISO 9000 and ITU-R BT.709. The formula:

For each color, compute relative luminance L = 0.2126×R + 0.7152×G + 0.0722×B
where R, G, B are normalized sRGB channel values with gamma correction:
if channel ≤ 0.03928: channel_normalized = channel / 12.92
else: channel_normalized = ((channel + 0.055) / 1.055)^2.4

Then contrast ratio = (L_lighter + 0.05) / (L_darker + 0.05)

The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).

WCAG thresholds:
- AA for normal text: 4.5:1
- AA for large text (18pt regular or 14pt bold): 3:1
- AAA for normal text: 7:1
- AAA for large text: 4.5:1
- Non-text contrast (UI components, graphical objects): 3:1

Large text has lower thresholds because bigger text is easier to read regardless of contrast. The threshold for \"large\" is 18pt (24px) regular weight or 14pt (18.67px) bold.

The gamma correction step is critical — linear RGB would give incorrect results because monitor brightness is not linear with pixel value. The transfer function converts sRGB values to linear light values that the human visual system responds to linearly.

Transparent foreground: if the foreground has alpha < 1, the effective color is the composite of foreground over background. Formula: effective = alpha × foreground + (1 - alpha) × background. The tool handles this automatically.

Suggestion logic: if a pair fails, the tool iteratively darkens the foreground or lightens the background (in HSL space, adjusting lightness) until the ratio passes. The result is typically the closest compliant color to the original intent.

Compared to browser DevTools contrast checkers, this tool gives a dedicated interface for testing multiple combinations without inspecting each DOM element. DevTools is still ideal for testing a live page; this tool is for design exploration.

Compared to WebAIM\u2019s contrast checker, this tool provides live preview, suggestion of passing alternatives, and handles transparent foregrounds. WebAIM remains an excellent reference; this tool builds on that with more features.

Compared to Figma\u2019s accessibility plugins, this browser tool works on any color values without requiring the Figma environment. Plugins are convenient in the design workflow; this tool is for ad-hoc checks.