Color Contrast Checker

Check a pair of colors

1. Enter each color as a three- or six-digit HEX value, or choose it with its color picker. The background must be a solid opaque color.
2. Leave foreground opacity at 100% for opaque text, or enter a lower percentage for a transparent foreground. Results update when all three values are valid.
3. Read the ratio and the separate normal-text, large-text and non-text outcomes. Check your actual design context, then copy the qualified report if you need to share the comparison.

Read the contrast results

For normal text, the numerical thresholds are 4.5:1 at AA and 7:1 at AAA. The calculation compares relative luminance, rather than judging how different the color names sound.

Large text uses 3:1 at AA and 4.5:1 at AAA. Large means at least 18pt regular or 14pt bold, or an equivalent size for other scripts. These are about 24 and 18.67 CSS pixels; actual typography still needs review.

Foreground opacity changes the effective color over the entered background. At 100% the foreground is opaque. At 0% it disappears into the background and has a ratio of 1:1. Background transparency is outside this tool’s scope.

The 3:1 non-text row compares this pair for essential visual details against an adjacent color. Every decision uses the unrounded ratio; the two-decimal headline is only a readable display.

Examples you can verify

Black #000000 against white #FFFFFF at 100% opacity gives 21:1, meeting all five displayed numerical thresholds. Swapping those opaque colors leaves the ratio unchanged.

Gray #777777 against white gives about 4.48:1. It does not reach the 4.5:1 threshold for normal text at AA, although it exceeds the 3:1 threshold for large text at AA.

Black at 50% opacity over white gives about 3.98:1 in this sRGB calculation. Reducing opacity can remove contrast even when the original opaque pair has a strong ratio.

A pair check is one part of accessibility

This tool evaluates solid sRGB colors with an opaque background and optional foreground opacity. It does not inspect a page, read fonts, sample images or gradients, simulate color vision, or assess every WCAG requirement and exception.

A numerical threshold result does not certify a page or product as accessible. Review actual text size and weight, adjacent colors, meaningful shapes, states and other accessibility requirements. Display rendering and antialiasing can also affect practical readability.

Calculated in your browser

The comparison runs in your browser without tool-added uploads or saved color history. Copy writes the current report to your clipboard only when requested. Normal site services and consent settings remain separate.