Use three- or six-digit opaque hex colors, such as #123 or #1F2937.
Contrast ratio
14.68:1
AA normal text (4.5:1)
✓ Pass
AAA normal text (7:1)
✓ Pass
AA large text (3:1)
✓ Pass
AAA large text (4.5:1)
✓ Pass
AA UI and graphics (3:1)
✓ Pass
Normal text preview at 16 CSS pixels.
Large bold text preview at 24 CSS pixels.
UI boundary previewA passing pair covers only this opaque sRGB comparison. It is not a complete WCAG audit of typography, states, images, gradients, transparency, or color-only meaning.
Hex colors, contrast calculations, previews, and suggestions stay in your browser. The site may still send one anonymous tool-use total after you change a valid setting.
How to Use the Color Contrast Checker
- Enter the foreground text or icon color and its background as three- or six-digit hex values.
- Review the exact ratio and the five WCAG 2.2 pass or fail results.
- Compare the normal-text, large-text, and UI boundary previews.
- If the selected target fails, try the nearest foreground or background lightness suggestion.
- Copy the result, CSS declarations, or a stable share link; use Swap or Reset for another pair.
WCAG 2.2 Contrast Formula and Thresholds
Each opaque 8-bit sRGB channel is divided by 255 and converted from encoded sRGB to linear light. WCAG uses the 0.04045 breakpoint, then combines the channels as 0.2126 red + 0.7152 green + 0.0722 blue. The final ratio is (lighter luminance + 0.05) divided by (darker luminance + 0.05). Ratios range from 1:1 for identical luminance to 21:1 for black and white.
WCAG 2.2 Level AA requires 4.5:1 for ordinary text and 3:1 for large-scale text. Level AAA requires 7:1 for ordinary text and 4.5:1 for large-scale text. Visual information needed to identify active user-interface components and meaningful graphics has a 3:1 Level AA threshold against adjacent colors.
Color Contrast Examples
Black on white
#000000 on #FFFFFF has the maximum 21:1 ratio. It passes the text and non-text thresholds reported here.
The normal-text AA boundary
#767676 on #FFFFFF is about 4.54:1. It passes AA normal text and AAA large text, but it does not reach the 7:1 AAA normal-text threshold.
A pair that passes large text but not normal text
#777777 on #FFFFFF is about 4.48:1. It passes the 3:1 large-text and UI threshold but narrowly misses 4.5:1 for AA normal text. This is why the unrounded ratio, not visual guesswork, determines the result.
How Lightness Suggestions Work
For each failing pair, the checker holds the adjusted color's HSL hue and saturation constant, searches lightness in 0.1-percentage-point steps, and returns the nearest candidate that reaches the selected ratio. One suggestion changes the foreground while the background stays fixed; the other changes only the background. If black or white at that hue/saturation endpoint still cannot reach a 7:1 target against the fixed color, the tool explains that lightness alone is insufficient.
Limits of a Two-Color Contrast Check
The first release accepts opaque sRGB hex colors only. It does not composite alpha, sample gradients or images, evaluate wide-gamut colors, inspect font size or weight, account for anti-aliasing and display conditions, or test every component state and adjacent color. Use the preview as a review aid rather than evidence of full WCAG conformance.
Contrast also does not replace labels, keyboard access, focus indicators, non-color cues, logical structure, or user testing. A page can use a passing pair and still have serious accessibility barriers.