Skip to main content

Web Tools

Color Contrast Checker

Check WCAG text contrast ratios for two web colors.

Color Contrast Checker tool

Loading tool…

Jump to a section

About This Tool

Readable foreground and background combinations are a basic part of accessible web design. This checker calculates the contrast ratio between two opaque HEX colors using the WCAG relative-luminance formula, then compares that ratio with the familiar AA and AAA thresholds for normal and large text. It complements a color converter: conversion tells you how a color is represented, while contrast checking evaluates the luminance difference between a pair of colors for this specific accessibility criterion.

How To Use It

  1. Enter the foreground or text color as a 3- or 6-digit HEX value.
  2. Enter the background color in the same format. The preview shows the pair together.
  3. Read the contrast ratio and the AA/AAA results for normal and large text.
  4. Use Swap colors to reverse the visual roles. The numerical ratio stays the same because contrast is based on the lighter and darker luminances.

Examples

Black on white

#000000 and #FFFFFF produce the maximum 21:1 contrast ratio and pass the listed AA and AAA text thresholds.

Identical colors

The same foreground and background color produce 1:1 contrast, which fails the listed text thresholds.

Threshold interpretation

A 4.5:1 ratio meets AA for normal text and AAA for large text, but does not meet AAA for normal text, which requires 7:1.

Useful Notes

How the contrast ratio is calculated

Each sRGB channel is converted to a linear-light value. Relative luminance is then calculated as 0.2126R + 0.7152G + 0.0722B. The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter relative luminance and L2 is the darker. The result ranges from 1:1 for equal luminance to 21:1 for black and white.

AA and AAA text thresholds

The checker reports the commonly used WCAG text thresholds: 4.5:1 for AA normal text, 7:1 for AAA normal text, 3:1 for AA large text, and 4.5:1 for AAA large text. Large-text classification depends on font size and weight, so the tool reports the threshold rather than trying to infer your CSS typography.

Contrast is only one accessibility requirement

Passing a ratio does not certify a page or component as accessible. Interfaces also depend on keyboard access, focus visibility, semantics, labels, state communication, zoom/reflow, motion, non-text contrast, and other requirements. Treat this result as one targeted design check.

Opaque HEX colors only

This calculator intentionally accepts opaque 3- and 6-digit HEX colors. Transparency changes the rendered color based on what is behind it, so alpha colors require compositing before a meaningful contrast ratio can be calculated.

Use the rendered colors that users actually see

Gradients, images, overlays, opacity, filters, blending, and changing backgrounds can produce different effective colors across a component. A single pair of HEX values is reliable only when it represents the actual foreground and background at the point being evaluated.

FAQ

What is a good contrast ratio?

It depends on the applicable criterion and text size. This tool shows the AA and AAA text thresholds beside the calculated ratio rather than labeling one ratio as universally good.

Why does swapping the colors keep the same ratio?

The formula always divides the lighter luminance by the darker luminance after applying the WCAG offsets, so reversing foreground and background does not change the numerical ratio.

Does a passing result mean my website is WCAG compliant?

No. Color contrast is one requirement among many. The result only evaluates this foreground/background pair against the listed text-contrast thresholds.

Are the colors uploaded?

No. HEX parsing, luminance calculation, and threshold checks run locally in the browser.